Фильтрация таблицы с Javascript [PHP/SQL]

Question

Так у меня есть SQL-запрос, который тянет все данные из таблицы MySQL, называется, например:

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 и сохранить значение в $ примере , Затем я могу использовать Еогеасп создать таблицу всего:

<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, чтобы выбрать значение и фильтрации таблицы соответственно (для например, показывать только заходы где поле описания является определенным значением).

Мой вопрос: как мне отфильтровать эту таблицу с помощью JS?

Я хотел бы иметь кнопки html, которые при нажатии вызывает функцию, которая изменяет соответствующие свойства тега css для видимости от скрытого до видимого.

Итак - по умолчанию каждый тег указан в таблице с видимостью, установленной для скрытия. Затем, когда некоторые элементы будут нажаты, соответствующие элементы будут видимыми.

Возможно ли это? Мой JS знание ограничено, поэтому чем больше я смотрю на него, тем больше кажется, что форма PHP может быть ssafest путь

Благодарности

Answer 1

Если вы хотите Filtering в таблице с помощью JavaScript. я предлагаю для этого Datatables.

DataTables:

DataTables является плагин для библиотеки Jquery Javascript. Это очень гибкий инструмент, основанный на фундаментах прогрессивного улучшения и добавит дополнительные элементы управления взаимодействием в любую таблицу HTML.

Вы можете найти больше пример на DataTables 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(); 
}); 

Добавить это КДС ссылки на страницу

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

Answer 2

Если выбрать фильтр objetcs на стороне клиента с помощью Javascript можно использовать array.filter()https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter или библиотеки полезным underscorejs http://underscorejs.org/