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,
- Simple Pagination with PHP and MySQl Using jQuery
- Simple Ajax Pagination with PHP
- Simple tutorial of pagination in php
- Advanced Ajax Pagination PHP,MySQL Using jQuery
Simple Pagination with PHP and Mysql
Step 1: included all js
and css
files.
<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.
$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.
<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.
<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.
thank you so much
hi i downloaded ur pagination and it works perfectly but when i try to change to my code it only show a normal pag with no next prev or ‘…’. better saying the changes i do in .js doesnt change the html..any idea what it can be?
may be count result is 0
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
Thanks for you code. It work perfectly.. Again Thank you
Lot of thanks
Hallo bro…how to can i used, try page= and multiple GET (for e.g filter PRICE, Range of MIN and MAX price, etc) ? thank before it.
it does not letting me download the code
i verified,Its working.You need to like facebook page to unlock download link.
hv u added style tag inpage.
have u check bootstrap css included
thanks a lot sir it saved lot of time
you can create using total rows value
well explained