Simple Pagination with PHP and MySQl Using jQuery

Pagination is useful to show large data records into chunks of data,In previous article we have learn simple pagination non Ajax using PHP.I got huge response from readers and some request as well.This tutorial about how to make simple pagination using php mysql with jquery simplePagination.js plugin.

Main problem was that display about millions of records,That creates issues when the number of pages are thousands.We have use advanced type pagination in php with jquery simplepagination plugin.Simplepagination.js is a simple jQuery pagination plugin,which are supporting CSS3 themes and Bootstrap support.

Checkout other tutorials of pagination,

php-pagination-non-ajax-jquery

Simple Pagination with PHP and Mysql

Step 1: included all js and css files.

Select Code
1
2
3
4
5
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="dist/simplePagination.css" />
<script src="dist/jquery.simplePagination.js"></script>

Step 2: Created connection with mysql using PHP.

Select Code
1
2
3
4
5
6
7
8
9
10
11
$servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "test";

    $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
    /* check connection */
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }

Step 3: Created HTML table with mysql records.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<table class="table table-bordered">  
        <thead>  
        <tr>  
        <th>Name</th>  
        <th>Salary</th>
        <th>Age</th>  
        </tr>  
        </thead>  
        <tbody>  
        <?php  
        while ($row = mysqli_fetch_assoc($rs_result)) {
        ?>  
                    <tr>  
                    <td><?php echo $row["employee_name"]; ?></td>  
                    <td><?php echo $row["employee_salary"]; ?></td>  
                    <td><?php echo $row["employee_age"]; ?></td>  
                    </tr>  
        <?php  
        };  
        ?>  
        </tbody>  
        </table>
          
        <?php  
        $sql = "SELECT COUNT(id) FROM employee";  
        $rs_result = mysqli_query($conn, $sql);  
        $row = mysqli_fetch_row($rs_result);  
        $total_records = $row[0];  
        $total_pages = ceil($total_records / $limit);  
        $pagLink = "<nav><ul class='pagination'>";  
        for ($i=1; $i<=$total_pages; $i++) {  
                     $pagLink .= "<li><a href='index.php?page=".$i."'>".$i."</a></li>";  
        };  
        echo $pagLink . "</ul></nav>";  
        ?>

Step 4: Call simplePagination methods on pagination container.

Select Code
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
            $(document).ready(function(){
            $('.pagination').pagination({
                    items: <?php echo $total_records;?>,
                    itemsOnPage: <?php echo $limit;?>,
                    cssStyle: 'light-theme',
                    currentPage : <?php echo $page;?>,
                    hrefTextPrefix : 'index.php?page='
                });
                });
            </script>

You can download source code and Demo from below link.

  • Cesar

    thank you so much

  • may be count result is 0

  • Paul Gilligan

    I had the same problem. There are two lines of PHP very similar to each other, and the table name in your database needs to set in both.

    $sql = “SELECT * FROM

  • Vinu Chacko

    Thanks for you code. It work perfectly.. Again Thank you

  • Praveen kumar

    Lot of thanks