2016-04-20 16 views
2

だから私は、MySQLのテーブルからすべてのデータを引き出しSQLクエリを持っているが、一例と呼ばれる:フィルタリングテーブル[PHP/SQL]

function get_example($conn){ 

$statement = "SELECT * FROM `example`"; 
if ($result = $conn->query($statement)) { 

    $rows = array(); 
    while($row = $result->fetch_array()){ 

     $rows[] = $row; 
    } 
    return $rows; 
} else { 
    return 0; 
} 
} 

私はPHPでこの関数を呼び出し、$例では値を格納します。私は、すべてのテーブルを作成するためのforeachを使用することができます。

<table> 

<tr> 
    <td>ID</td> 
    <td>Name</td> 
    <td>Description</td> 
</tr> 

<?php 
foreach($example as $entry){ 
    echo "<tr>"; 
    echo "<td>" . $entry['id'] . "</td>"; 
    echo "<td>" . $entry['name'] . "</td>"; 
    echo "<td>" . $entry['description'] . "</td>"; 
    echo "</tr>"; 
} 
?> 

</table> 

これは十分にすべてシンプルで、私は、例えばのために(値を選択し、それに応じてテーブルをフィルタリングする方法のPOSTでのみショーのentiresをフォームを使用することができますdescriptionフィールドは特定の値です)。

私の質問は、JSを使用してこのテーブルをフィルタするにはどうすればいいですか?

私は、クリックすると、可視性の関連するタグのCSSプロパティを隠しから可視に変更する関数を呼び出します。

デフォルトでは、すべてのタグはvisibility proeprtyがhiddenに設定されたテーブルにリストされています。次に、特定の要素がクリックされると、関連する要素が可視に設定されます。

これは可能ですか?より多くの私はそれに見て、より多くのPHPのフォームは、あなたのテーブルでフィルタリングをしたい場合はJavaScriptの助けを借りて

おかげ

答えて

1

に行くssafest方法かもしれらしいので、私のJSの知識が限られています。私はDatatablesを提案します。

のDataTable:

DataTableのプラグインのjQuery JavaScriptライブラリのためです。プログレッシブエンハンスメントの基盤に基づいた非常に柔軟なツールであり、高度なインタラクションコントロールを任意のHTMLテーブルに追加します。

あなたはDataTableの here

HTMLの詳細例を見つけることができ

<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Id</th> 
       <th>Name</th> 
       <th>Description</th> 
      </tr> 
     </thead> 

     <tbody> 
      <?php 
      foreach($example as $entry){ 
      <tr> 
       <td><?php $entry['id']; ?></td> 
       <td><?php $entry['name']; ?></td> 
       <td><?php $entry['description']; ?></td> 
      </tr> 
      } 
      ?> 
     </tbody> 
</table> 

のJs

$(document).ready(function() { 
$('#example').DataTable(); 
}); 

あなたのページにこのCDNリンクを追加

https://code.jquery.com/jquery-1.12.0.min.js

https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js

https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css