footable filtering
Affichage des articles dont le libellé est footable filtering. Afficher tous les articles
Affichage des articles dont le libellé est footable filtering. Afficher tous les articles

FooTable Tutorials

Add Comment
                                                     1: Download And Use FooTable
use footable


                                                   2:  Sort Html Table Using FooTable

footable sort


                                        3: Responsive Html Table Using Footable
footable responsive

                                 4: Create a Pagination In Html Table Using Footable
footable pagination
                                  5: Search And Filter Data In Html Table Using FooTable
footable search

 6: Responsive FooTable With Filter Sort And Paging

How To Search And Filter Data In Html Table Using FooTable

Add Comment

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:
-FooTable.
-Php.
- NetBeans IDE .
- XAMPP .
- PhpMyAdmin .





Source Code:

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

<?php

$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>
<html>
    <head>
        <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>
     
  </head>
    <body>
        <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">
            <thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
            </thead>
            <tbody>
                <!-- populate table from mysql database -->
            <?php while($row1 = mysqli_fetch_array($result)):;?>
            <tr>
                <td><?php echo $row1[0];?></td>
                <td><?php echo $row1[1];?></td>
                <td><?php echo $row1[2];?></td>
                <td><?php echo $row1[3];?></td>
            </tr>
            <?php endwhile;?>
            </tbody>
        </table>
    </body>
    <script type="text/javascript">
    
       $(document).ready(function(){
           
           $('.footable').footable();
           
       });
    
    </script>
</html>





///////////////OUTPUT: 
                                                           
footable filter
FooTable Filter
                                                                 
                     
Demo From fooplugins :
Filtering

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


Inscription à : Articles (Atom)