How to add pagination using PHP and Javascript

by

Learn How to add pagination using PHP and Javascript to a website is the feature that most of the developers want to learn. In this article, I will show you how you can add a complete working PHP based pagination and then convert that pagination into ajax based pagination.

What is pagination?

Word Pagination comes from 2 parts. Page and navigation. Which means whenever you want the user to navigation or move from the first page to other pages. We need to add pagination. Now in here when data is coming from Database and data is allot. We need to add pagination so that we may not load thousands of records at the same time when the page loaded. SO we need to somehow show first 10 20 or 50 records at the first page and then next 50 on the second page and so on. So that user can navigate to records 50 per page. It will increase the speed of your website and also it is necessary so that server never gets dead in order to load that much records.

If you wanna learn PHP from scratch. By Clicking here you will be able to learn a complete PHP and MYSQLI language.

Why need to add pagination?

If a database has more than 1 million records and you want to display those records in your website. If you just write a MySQL query to fetch back all 1 million records from database and display on your browser. It will take forever to load that much data. To solve this problem pagination system is here for you.

Enough talking let’s get started to learn how you can create your own pagination system. First by using simple PHP and then I will show you how you can convert that PHP based pagination into javascript SO that each page gets load without refreshing your web page.

 

 

Isn’t it easy to make a pagination in PHP and then convert that in Jquery? Also, you can design this pagination according to your website theme. You can give classes or id to any span and then design that using CSS properties to make it look more attractive and professional. An example is displayed below.

And here is the source code of what I made in the video.

PHP Code
<?php
 $connection = mysqli_connect("localhost", "root", "", "countries");

 $q1 = mysqli_query($connection, "SELECT * FROM countries");
 $count = mysqli_num_rows($q1);
 
 $rowsperpage = 20;

 $page = $_REQUEST['p'];

 if( $page == 0 or $page == '' ){
 $page = 1;
 }

 $page = $page - 1;

 $p = $page * $rowsperpage;
 
 $query = "SELECT * FROM countries limit ".$p.", ".$rowsperpage;
 $run = mysqli_query($connection, $query);

 while( $rs = mysqli_fetch_array($run) ){
 echo $rs['id'].' -> '.$rs['country_name'].'<br />';
 }

 if( $_REQUEST['p'] > 1 ){
 $prev_page = $_REQUEST['p'] - 1;
 echo '<span style="cursor:pointer;" onclick="LoadData('.$prev_page.')">Back</span>';

 }

 $check = $p + $rowsperpage;

 if( $count > $check ){
 $next_page = $_REQUEST['p'] + 1;
 echo '<span style="cursor:pointer;" onclick="LoadData('.$next_page.')">Next</span>';
 }

 $limit = $count / $rowsperpage;

 $limit = ceil($limit);


 echo '<br /><br />';
 for( $i=1; $i<=$limit; $i++ ){

 if( $i==$_REQUEST['p'] ){
 echo '<strong>'.$i.'</strong> ';
 }else{
 echo '<span style="cursor:pointer;" onclick="LoadData('.$i.')">'.$i.'</span> ';
 }
}

?>

HTML and JQuery Code
<!doctype html>

<html>
 
 <head>
 
 <script
 src="https://code.jquery.com/jquery-3.1.1.js"
 integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
 crossorigin="anonymous"></script>

 </head>



 <body>
 
 <div id="results"></div>


 <script>

 $(document).ready(function(){
 LoadData(0);
 });
 
 function LoadData(pagenum){

 $.post('index.php?p='+pagenum, function(reponse){

 $('#results').html(reponse);

 });

 }
 </script>

 </body>

</html>

GOOD LUCK!

Leave a Comment