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

Share this

Related Posts

Previous
Next Post »