In this PHP tutorial, we’ll learn how to make pagination with PHP and MySql. The pagination can be ajax-based, but in this case, I’m creating pagination without ajax. To create dynamic pagination, I’m using bootstrap3 and PHP5. I’m assuming you’ve got a table and some data.
Normally, SQL SELECT query may return results containing thousands or millions of records. displaying all of those records on a single page is not a good idea. So, the output can be divided into multiple pages.
What is Pagination?
Paging allows you to display all of your retrieved results on multiple pages rather than all of them on a single page.
I am following the simple steps outlined below:
- Step 1: I will connect a MySQL database with a table.
- Step 2: Data is retrieved from a MySQL table and displayed in the table.
- Step 3: I’ll add a pagination link at the bottom of the table.
Checkout other tutorials on pagination,
- Simple Ajax Pagination with PHP
- Simple tutorial of pagination in php
- Simple Pagination with PHP and MySQl Using jQuery
- Advanced Ajax Pagination PHP,MySQL Using jQuery
Let’s make an index.php
file and paste the code below into it. This code will assist you in creating pagination in PHP. To create pagination at the bottom of the table, I’ll use the bootstrap pagination
component.
$dbhost = 'localhost'; $dbuser = 'root'; $dbpass = ''; $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'); $dbname = 'test'; $conn = mysqli_connect($dbhost, $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(); } $limit = 2; if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; }; $start_from = ($page-1) * $limit; $sql = "SELECT * FROM posts ORDER BY title ASC LIMIT $start_from, $limit"; $rs_result = mysqli_query($conn, $sql); };
Let’s create a table and iterate rows data on table row using a while loop.
jQuery('.getvalue').on('click', function(e) { var selValue = document.querySelector('input[name = "radioGrp"]:checked').value; alert(selValue); }); <table class="table table-bordered table-striped"> <thead> <tr> <th>title</th> <th>body</th> </tr> </thead> <thead></thead> <tbody> <?php while ($row = mysql_fetch_assoc($rs_result)) {?> <tr> <td><?php echo $row["title"]; ?></td> <td><?php echo $row["body"]; ?></td> </tr> <?php } ?> </tbody> </table>
Now, we will count all records and create pagination –
$sql = "SELECT COUNT(id) FROM posts"; $rs_result = mysqli_query($conn, $sql); $row = mysql_fetch_row($rs_result); $total_records = $row[0]; $total_pages = ceil($total_records / $limit); $pagLink = ' <div class="pagination">'; for ($i=1; $i<=$total_pages; $i++) { $pagLink .= <a href="index.php?page=">".$i."</a> };</div> <div class="pagination">echo $pagLink . ""; ?></div>
Watch on Youtube
Result:
You can check live demo, YouTube video and download source code
Hello.
I’ve tried some scripts to make the active state on navigation, but with no success. Can you provide me some directions for how to generate the active state nav on active page? Thanks.
Ya sure,
You can use jQuery live event on nav link like below:
$(‘.navlink’).live(‘click’, function({
$(‘.navlink’).removeClass(‘active’);
$(this).addClass(‘active’);
});
This code fired on your navigation links which has ‘navlink’ class.We first remove active class and then add active class on current clicked navigation.
I hope its help.
tnx dude! it’s wrkng perfectly!
thank…
dwi from Indonesia
thanks
thank you so much man you have saved my time. you have done job without any jquery or ajax plugins.
Do you know why I get ‘SQL error’?
can u plz post full error which r u getting
Hi!
Thanks for this useful code!
What if I’ve hundreds of pages?
Any way to shrink it to few pages and “next” and “previous” buttons?
you can apply same method but on anchor link set ur pages url
Thx man works perfect!!!!!!!!!!!!!!!!!!!!!!!!!!
this is awesome, thanks man
$pagLink = “”;
can any1 please explain this line where this class is written
this line will create pagination main div
Thanks Man, Its very simple and working perfectly. osm!