FooTable Tutorials

                                                     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






Responsive Html Table Using Footable

FooTable : How To Create Responsive Html Table Using FooTable

________________________________________________________


In this FooTable Tutorial we will see How To Create a Responsive Html Table To Display friendly In Desktop , Tablet And Mobile  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> Responsive Html Table Using FooTable </title>
        <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>

    </head>
    
    <body>
        
        <!-- toggle-arrow-alt = icon name -->
        <!-- add toggle-medium for a medium size -->
        <!-- add toggle-large for a large size -->
        
        <table class="footable toggle-arrow-alt">
<thead>
<tr>
            <!-- data-toggle = where the toggle icon will appear -->
<th data-toggle="true">ID</th>
                        <!-- hide this column in tablet and mobile -->
<th data-hide="tablet,phone">First Name</th>
                        <!-- hide this column in mobile devices -->
<th data-hide="phone">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: 




                                                           
                                                               
responsive html table in tablet
In Tablet

responsive html table in mobile
In Phone


See more Icon Styles




How To Create a Pagination In Html Table Using Footable

FooTable : How To Make Data Pagination In Html Table

________________________________________________________


In this FooTable Tutorial we will see How To Navigate Html Table Data With Pagination 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> Html Table Pagination Using FooTable </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.paginate.js"></script>     
  </head>
    <body>
        
     <!-- data-page-size = number of data to display -->
     <!-- data-XXX-text = text to display in the pagination bar -->
        <table class="footable" data-page-size="6" data-first-text="FIRST" data-next-text="NEXT" data-previous-text="PREVIOUS" data-last-text="LAST">
            <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>

            <!-- the pagination -->
            <!-- hide-if-no-paging = hide the pagination control -->
            <tfoot class="hide-if-no-paging">
            <td colspan="5">
                <div class="pagination"></div>
            </td>
            </tfoot>
        </table>
    </body>
    <script type="text/javascript">
       
       $(document).ready(function(){
           
           $('.footable').footable();
           
       });
       
    </script>
</html>



///////////////OUTPUT: 




                                                           
                                                               
html table pagination
FooTable Pagination



                     
Demo From fooplugins :
Pagination

Other FooTable Tutorials :
Download And Use
Sorting Html Table
Responsive Html Table
Search And Filter Data In Html Table



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



How To Sort Html Table Using FooTable

FooTable : How To Order Html Table Data Using FooTable

________________________________________________________


In A Previous Php Tutorial We See How To Order Data Using Mysql Database But In this FooTable Tutorial we will see How To Sort Html Table Data In Ascending And Descending Order For Each Column 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> Sorting Html Table Using FooTable </title>
        <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.sort.js"></script>
    </head>
    
    <body>
        
        <table class="footable">
            
<thead>
            <!-- data-type = data type in the column -->
            <!-- data-sort-ignore = disable sorting for the column -->
            <!-- data-sort-initial = sort the column when the FooTable is initialized -->
<tr>
<th data-type="numeric">ID</th>
<th>First Name</th>
<th data-sort-ignore="true">Last Name</th>
<th data-type="numeric" data-sort-initial="true">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: 




                                                           
                                                               
order html table
FooTable Sort