#BLOG - 

Ajax Pagination In PHP And MySQL - Step By Step Tutorial

In previous tutorial we have learn Simple Pagination in PHP and MySQL and in this tutorial, we will learn Simple Ajax pagination in PHP. As we know pagination is a very important part where we have to display a large set of data from database. In previous tutorial we have shown you how to display a large set of data grouped into pages and navigate the pages through navigational links. Here we show how you can implement ajax functionality for each request. As we have told you that using this simple PHP pagination script you can implement any kind of pagination. So, in this tutorial we will use same PHP pagination class to display data from database with ajax request with your limitation choice and also create advanced pagination navigation with next and previous.

2029
Last Modified on 2018-05-27
Ratings:   5.00 from 1 Reviews

Ajax Pagination In PHP And MySQL - Step By Step Tutorial image

Newsletter Subscribtion

Subscribe to our newsletter so that you can receive all updates.


Why uses this Code


If you are looking for the ultimate pagination script in PHP and MySQL, then you should try this code at first. You have to include the pagination class first, then just call two methods that’s it. To fetch and display the results you have to use getData() method and to create automatic navigation links just use createLinks() method. I have explained all the process step by step. You do not have to search any other pagination script if you understand how to use this script. The user can also change the dataset limits from the results shown section. Check out this ajax pagination in PHP demo I have attached the bottom of this article.


How does it work?


As I told you that this is a responsive design so this pagination automatically adjusts in any device. I have posted an article How to create responsive CSS pagination design. After reading this article you can understand how responsive navigation links work. I have created an option to change the data limit.


Check out other PHP pagination tutorials I have posted –



What you will need to create this PHP pagination


Steps to create simple ajax pagination in PHP and MySQL


I have used both MySQLI and PDO database connection. I will explain you now step by step how easily you can create PHP pagination with MYSQL.


1. Create Database table with dummy data


CREATE TABLE `pcustomers` (
`pcustomerNumber` int(11) NOT NULL,
`pcustomerName` varchar(50) NOT NULL,
`pcontactLastName` varchar(50) NOT NULL,
`pcontactFirstName` varchar(50) NOT NULL,
`pphone` varchar(50) NOT NULL,
`paddressLine1` varchar(50) NOT NULL,
`paddressLine2` varchar(50) DEFAULT NULL,
`pcity` varchar(50) NOT NULL,
`pstate` varchar(50) DEFAULT NULL,
`ppostalCode` varchar(15) DEFAULT NULL,
`pcountry` varchar(50) NOT NULL,
`psalesRepEmployeeNumber` int(11) DEFAULT NULL,
`pcreditLimit` decimal(10,2) DEFAULT NULL,
PRIMARY KEY (`customerNumber`),
KEY `salesRepEmployeeNumber` (`salesRepEmployeeNumber`),
CONSTRAINT `customers_ibfk_1` FOREIGN KEY (`salesRepEmployeeNumber`) REFERENCES `employees` (`employeeNumber`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Basic HTML and CSS (Index.php)  


In this step, I have created a basic structure to display our PHP pagination. At first, I have used Bootstrap for designing part and for navigation links I have used my own responsive pagination stylesheet. I have used a table to display results and navigation links. Here is the code –


<!DOCTYPE html>
<head>
<title>PHP Pagination</title>

<style type="text/css">
.pagination {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
display: inline-block !important;
}
.pagination ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: 0 0;
}
.pagination li {
display: inline;
margin: 0;
padding: 0;
}
.pagination li a {
border: 1px solid #c9c9c9;
color: #242424;
text-decoration: none;
display: inline-block;
transition: all .8s ease 0s;
height: 40px;
line-height: 40px;
margin: 0 10px 0 0;
padding: 0;
text-align: center;
width: 40px;
margin-top: 10px;
}
.pagination li a:hover {
background-color: #4CAF50;
color: white;
}
.pagination li.active a {
background-color: #4CAF50;
color: white;
}
.pagination li.arrows a {
background-color: #4C5BAF;
color: white;
font-size: 14px;
}

</style>
</head>
<body>
<div class="container-fluid">
<br />
<div class="text-center">
<div >
<a href="" class="btn btn-success">Visit This Tutorial</a>
</div>
</div>
<div class=" ">


<br /><br />
<div class="">
<div class="">

<div class="">
<h1 style="font-size: 20px;font-weight:bold;">PHP Pagination</h1>
</div>
<div class="">
<!-- Results Limit Change -->
</div>
</div>
</div>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered table-rounded">
<thead>
<tr>
<th>Sl no.</th>
<th>customerName</th>
<th width="20%">Phone</th>
<th width="20%">City</th>
<th width="25%">State</th>
</tr>
</thead>

<tbody id="showData">
<!-- Results -->
</tbody>
<tfoot id="showLinks">
<!-- Pagination Links-->
</tfoot>
</table>
</div>
</div>
</div>
</body>
</html>

3. Display loading overlays while data is loading via ajax request


Here we are creating a loading effect while data is loading from database via ajax request. Place this script inside tbody section.


<div id="overlay">
<tr>
<th colspan="3" class="loadingClass">
Loading...
</th>
</tr>
</div>

4. Displaying data from database


To display data from database, we have used "showData" id and to display navigation links we have used "showLinks" id. Inside "showData" block we will display our data. Now just simple call this loadData() function with limitCount, pageCount, linkCount parameters.


function loadData(limitCount,pageCount,linkCount)
{
var xmlhttp = new XMLHttpRequest();
var url = "process.php?limitCount="+limitCount+"&pageCount="+pageCount+"&linkCount="+linkCount;

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

var myArr = JSON.parse(this.responseText);

setInterval(function() {
document.getElementById("overlay").style.display = "none";

},500);
document.getElementById("showData").innerHTML = myArr.results;
document.getElementById("showLinks").innerHTML = myArr.links;

}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}

5. Displaying Onload data


When page is loaded first time then we called our loadData() function via onload javascript event. We are passing default 5 results per page, pagecount number 1 and link count 1 as parameters.


<body onload="loadData(5,1,1)">

6. Change the number of results per page


We have used the same functionality here how you can easily change the number of results per page. You have to used changelimit() function. To call this function we have used onchange javascript event on Results shown dropdown list.


function changelimit(v) {
loadData(v,1,1)
return false;
}

My Words


By following the above advances, you can without much of a stretch execute any sort of Ajax pagination in PHP effectively. I am utilizing this pagination content into each venture that is the reason I am imparting to you. Kindly don't dither to leave inquiries or remarks in the remark box underneath. What's more, on the off chance that you like this instructional exercise please share it with your companions by means of Email or Social Media. In the event that you require any assistance or more data you can without much of a stretch get in touch with me. I will help you. To get quicker reaction (inside 60 minutes) please send message on our authority FB Page.







Download Code

Please send us a message on Our Facebook Page to get the source code of this tutorial






Share Now With Your Friends & Family:




Please Leave a ReplyCancel Reply


Name
Email
Website
Comment
Ratings
   

  • Ratings: 5/5

    Thank you so much for this solution its exactly working perfectly
    Nice Tutorial. Thanks a ton…
    reply


Follow Us
About Me
author souradeep debnath

Hi, I am Souradeep Debnath and I am really happy that you are here. Here I share tutorial topics on technology.





Live Chat


souradeep debnath live facebook