Foreachのデータをテーブルに保存して、ポップオーバー（Jquery）に同じデータを表示する方法

Question

問題があります... codeigniterを使用していて、テーブルにループforeachループを持っていますが、DATAテーブルに表示し、それをpopover ..に表示します。どうやってやるの ？

<?php if(isset($data)) { ?> 
 
<?php foreach($data as $key) {?> 
 
<tr> 
 
    <th scope="row"> 
 
    <?php echo $key->id ?></th> 
 
    <th scope="row" name="nasip"> 
 
    <?php echo $key->nasname ?></th> 
 
    <th scope="row"> 
 
    <?php echo $key->shortname ?></th> 
 
    <th scope="row"> 
 
    <?php echo $key->type ?></th> 
 
    <th scope="row"> 
 
    <?php echo $key->ports ?></th> 
 
    <th scope="row"> 
 
    <?php echo $key->secret ?></th> 
 
    <th scope="row"> 
 
    <?php echo $key->server ?></th> 
 
    <th scope="row"> 
 
    <?php echo $key->community ?></th> 
 
    <th scope="row"> 
 
    <?php echo $key->description ?></th> 
 
    <th scope="row"><a data-toggle="modal" data-target=".bs-example-modal-sm" id="delete" class="btn btn-danger active" role="button">Delete</a> 
 
    </th> 
 
    <th scope="row"><a data-toggle="modal" data-target="#exampleModal" href="" class="btn btn-success active" id="edit" role="button">Edit Nas</a> 
 
    </th> 
 

 

 
</tr> 
 

 
<?php }?> 
 
<?php }else{ echo "<div>NO DATA !</div>"; } ?> 
 

 
<!-- Section Edit Page --> 
 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="exampleModalLabel">Update Nas Info</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form id="form_id"> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">NAS IP</label> 
 
      <input type="text" class="form-control" id="nasname" value="<?php echo $key->nasname ?>"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Shortname:</label> 
 
      <input type="text" class="form-control" id="shortname" value="<?php echo $key->shortname ?>"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Type:</label> 
 
      <input type="text" class="form-control" id="type" value="<?php echo $key->type ?>"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Ports:</label> 
 
      <input type="text" class="form-control" id="ports" value="<?php echo $key->ports ?>"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Secret:</label> 
 
      <input type="text" class="form-control" id="secret" value="<?php echo $key->secret ?>"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Server:</label> 
 
      <input type="text" class="form-control" id="server" value="<?php echo $key->server ?>"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Community:</label> 
 
      <input type="text" class="form-control" id="community" value="<?php echo $key->community ?>"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Description:</label> 
 
      <input type="text" class="form-control" id="description" value="<?php echo $key->description ?>"> 
 
      </div> 
 

 
     </form> 
 

 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary">Send message</button> 
 
     </div> 
 
     </div>

私は、更新を行うかなどを削除することはできませんこの方法を使用して...ので、どのように私はJqueryでこの問題を解決することができますか？

多くのおかげで..あなたがあなたのクエリは、約20または30の結果を返している場合はJQueryせずに何ができるかの

Answer 1

一例：ユーザーが選択したものを各結果のためのモーダルを作成し、表示します。あなたは、サーバーのとクライアントのパフォーマンスに依存し、結果の多くを持っている場合は、このソリューションは、高い実行時間とタイムアウトリスクの最善の方法ではありません。

<?php 
$table = "<table>"; 
$modals = ""; 
if(isset($data)) { 
    foreach($data as $key) { 
     $table .= ' 
<tr> 
    <th scope="row"> 
    '.$key->id.'</th> 
    <th scope="row" name="nasip"> 
    '.$key->nasname.'</th> 
    <th scope="row"> 
    '.$key->shortname.'</th> 
    <th scope="row"> 
    '.$key->type.'</th> 
    <th scope="row"> 
    '.$key->ports.'</th> 
    <th scope="row"> 
    '.$key->secret.'</th> 
    <th scope="row"> 
    '.$key->server.'</th> 
    <th scope="row"> 
    '.$key->community.'</th> 
    <th scope="row"> 
    '.$key->description.'</th> 
    <th scope="row"><a data-toggle="modal" data-target=".bs-example-modal-sm" id="delete" class="btn btn-danger active" role="button">Delete</a> 
    </th> 
    <th scope="row"><a data-toggle="modal" data-target="#edit'.$key->id.'" href="" class="btn btn-success active" id="edit" role="button">Edit Nas</a> 
    </th> 
</tr>'; 
     $modals .= ' 
<div class="modal fade" id="#edit'.$key->id.'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title" id="exampleModalLabel">Update Nas Info</h4> 
     </div> 
     <div class="modal-body"> 
     <form id="form_id"> 
      <div class="form-group"> 
      <label for="recipient-name" class="control-label">NAS IP</label> 
      <input type="text" class="form-control" id="nasname" value="'.$key->nasname.'"> 
      </div> 
      <div class="form-group"> 
      <label for="recipient-name" class="control-label">Shortname:</label> 
      <input type="text" class="form-control" id="shortname" value="'.$key->shortname.'"> 
      </div> 
      <div class="form-group"> 
      <label for="recipient-name" class="control-label">Type:</label> 
      <input type="text" class="form-control" id="type" value="'.$key->type.'"> 
      </div> 
      <div class="form-group"> 
      <label for="recipient-name" class="control-label">Ports:</label> 
      <input type="text" class="form-control" id="ports" value="'.$key->ports.'"> 
      </div> 
      <div class="form-group"> 
      <label for="recipient-name" class="control-label">Secret:</label> 
      <input type="text" class="form-control" id="secret" value="'.$key->secret.'"> 
      </div> 
      <div class="form-group"> 
      <label for="recipient-name" class="control-label">Server:</label> 
      <input type="text" class="form-control" id="server" value="'.$key->server.'"> 
      </div> 
      <div class="form-group"> 
      <label for="recipient-name" class="control-label">Community:</label> 
      <input type="text" class="form-control" id="community" value="'.$key->community.'"> 
      </div> 
      <div class="form-group"> 
      <label for="recipient-name" class="control-label">Description:</label> 
      <input type="text" class="form-control" id="description" value="'.$key->description.'"> 
      </div> 
     </form> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Send message</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
     '; 
    } 
    $table .= "</table>"; 
} 
else { 
    echo "<div>NO DATA !</div>"; 
} 

?>