How To Search And Filter Data In Html Table Using FooTable

FooTable : How To Search And Filter Data In Html Table With Input Text Using FooTable


On A Previous Php Tutorial We See How To Make A Html Table Search But In this FooTable Tutorial we will see How To Filter Html Table Data With Input Text Using FooTable .

I Use In This Tutorial:
- NetBeans IDE .
- PhpMyAdmin .

Source Code:

<!-- php code to get data from mysql database -->


$hostname = "localhost";
$username = "root";
$password = "";
$databaseName = "test_db";

$connect = mysqli_connect($hostname, $username, $password, $databaseName);
$query = "SELECT * FROM `users";
$result = mysqli_query($connect, $query);


<!DOCTYPE html>
        <title> FooTable Filter Html Table </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/footable.core.css">
        <link rel="stylesheet" href="css/footable.metro.css">
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/footable.js"></script>
        <script src="js/footable.filter.js"></script>
        <input type="text" id="filter"><br><br>
        <!-- data-filter : # + the id of the input text -->
        <!-- data-filter-minimum : the minimum number of characters to search -->
        <table class="footable" data-filter="#filter" data-filter-minimum="3">
                <th>First Name</th>
                <th>Last Name</th>
                <!-- populate table from mysql database -->
            <?php while($row1 = mysqli_fetch_array($result)):;?>
                <td><?php echo $row1[0];?></td>
                <td><?php echo $row1[1];?></td>
                <td><?php echo $row1[2];?></td>
                <td><?php echo $row1[3];?></td>
            <?php endwhile;?>
    <script type="text/javascript">


footable filter
FooTable Filter

Demo From fooplugins :

Other FooTable Tutorials :
Download And Use
Sorting Html Table
Responsive Html Table
Create a Pagination In Html Table

Share this

Related Posts

Next Post »