Responsive FooTable With Filter Sort And Paging

Responsive Html Table With Filter Sort And Paging Using FooTable

________________________________________________________


In this FooTable Tutorial we will see How To Create a Responsive Html Table To Display friendly In Desktop , Tablet And Mobile With SortingFilter And 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 = "javaprg";

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

?>

<!DOCTYPE html>
<html>
    <head>
        <title> Html Table With 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> 
        <script src="js/footable.sort.js"></script>
        <script src="js/footable.filter.js"></script>
  </head>
    <body>
        
        <!-- data-page-size = number of data to display -->
        <!-- data-XXX-text = text to display in the pagination bar -->
        <input type="text" id="filter"><br><br>
        <table class="footable" data-filter="#filter" data-filter-minimum="4" data-page-size="3" data-first-text="<<" data-next-text=">" data-previous-text="<" data-last-text=">>" >
           <thead>
            <tr>
                <!-- data-toggle = where the toggle icon will appear -->
                
                <th data-toggle="true">Id</th>
                <!-- hide this column in mobile -->
                <th data-hide="phone">Name</th>
                <!-- hide this column in tablet and mobile -->
                <th data-type="numeric" data-hide="tablet,phone">Quantity</th>
                <th data-type="numeric" data-hide="tablet,phone">Price</th>
                <th data-hide="phone">Image</th>
                <th data-type="numeric">Category</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>

        <!-- images from folder with the same name as the id + jpg -->
                <td><img src="products/<?php echo $row1[0];?>.jpg" style="height: 115px; width: 170px;"></td>
                <td><?php echo $row1[5];?></td>
            </tr>
            <?php endwhile;?>
            </tbody>
            <!-- the pagination -->
            <!-- hide-if-no-paging = hide the pagination control -->
            <tfoot class="hide-if-no-paging">
            <td colspan="6">
                <div class="pagination"></div>
            </td>
            </tfoot>
        </table>
    </body>
    <script type="text/javascript">
    
      $(document).ready(function(){
         $('.footable').footable(); 
      });
    
    </script>
</html>


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




                                                         
html table using footable
Html Table In Desktop

footable in tablet
Html Table In Tablet

FooTable In mobile
Html Table In Mobile
                                             




Share this

Related Posts

Previous
Next Post »

3 comments

comments
24 mai 2016 à 05:19 delete

this tutorial help for me , here are lots of easy way php pagination tutorials, i thinks may be you have help

Reply
avatar
26 juillet 2016 à 23:11 delete

And ... How refrech the table?

Reply
avatar
26 janvier 2017 à 07:55 delete

Please provide these files


footable.core.css
footable.metro.css
jquery-1.11.3.min.js
footable.js
footable.paginate.js
footable.sort.js
footable.filter.js

Reply
avatar