Filtering tables with Javascript [PHP/SQL]

Question

So I have an SQL query which pulls all data from a mysql table, called example:

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;
}
}

I call this function in PHP and store the value in $example. I can then use a foreach to create a table of everything:

<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>

This is all simple enough and I can use a form with method POST to choose a value and filter the table accordingly (for eg, only show entires where the description field is a certain value).

My question is, how do I filter this table using JS?

I would want to have html buttons which, when clicked, call a function which changes the relevant tags css property for visibility from hidden to visible.

So - by default every tag is listed int he table with visibility proeprty set to hidden. Then, when certain elements are clicked, the associated elements are set to visible.

Is this possible? My JS knowledge is limited so the more I look into it, the more it seems the PHP form may be the ssafest way to go

Thanks

Community · Accepted Answer · 2020-06-20 09:12:55Z

If you want the Filtering in your table with the help of JavaScript. the i suggest Datatables for it.

DataTables:

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

You Can find More Example on 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();
});

Add this cdn links to your page

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

Vermicello · Accepted Answer · 2016-04-20 10:24:34Z

0

If you choose to filter objetcs client-side using javascript you could use array.filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter or the usefull library underscorejs http://underscorejs.org/

answered Apr 20, 2016 at 10:24

Vermicello

3081 gold badge6 silver badges11 bronze badges

Collectives™ on Stack Overflow

Filtering tables with Javascript [PHP/SQL]

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related