AJAX Pagination with PHP
by Vincy. Last modified on July 9th, 2022.
In this tutorial, we are going to see an example PHP code to add pagination to a list of records retrieved from database. I am using AJAX to fetch records for each page from database with jQuery.
In a previous tutorial, we have seen already about AJAX pagination using jQuery. In this example, I have added an option to choose pagination format and also I have changed the look and feel to enrich the per-page design.
Refer the fully featured PHP pagination using MySQL database for the best PHP script for pagination.
In this example, we have two options based on which pagination format will be changed. One is displaying only Prev and Next links to navigate back and forth to the previous and next pages.
The other format is displaying all page links and also with the links to navigate to the first, last, previous and next pages.
HTML Code to Choose Pagination Format
The following code shows a dropdown with two options for the pagination format. The default format is to display all per-page links. We call jQuery to change pagination format on the change event of the dropdown options.
<div id="overlay"><div><img src="loading.gif" width="64px" height="64px"/></div></div>
<div class="page-content">
<div style="border-bottom: #F0F0F0 1px solid;margin-bottom: 15px;">
Pagination Setting:<br> <select name="pagination-setting" onChange="changePagination(this.value);" class="pagination-setting" id="pagination-setting">
<option value="all-links">Display All Page Link</option>
<option value="prev-next">Display Prev Next Only</option>
</select>
</div>
<div id="pagination-result">
<input type="hidden" name="rowcount" id="rowcount" />
</div>
</div>
Show Pagination Results via AJAX
We have a jQuery function to send an AJAX call to PHP to get pagination results. We call this function in two places. One is on changing pagination settings option to update pagination format.
The other call is on clicking pagination links to show current page result and to highlight currently selected page.
<script>
function getresult(url) {
$.ajax({
url: url,
type: "GET",
data: {rowcount:$("#rowcount").val(),"pagination_setting":$("#pagination-setting").val()},
beforeSend: function(){$("#overlay").show();},
success: function(data){
$("#pagination-result").html(data);
setInterval(function() {$("#overlay").hide(); },500);
},
error: function()
{}
});
}
function changePagination(option) {
if(option!= "") {
getresult("getresult.php");
}
}
</script>
Process AJAX Pagination Request in PHP
The following code reads all parameters like the current page, pagination-setting that are sent by an AJAX call. Based on these parameters PHP script calls pagination function to form AJAX response.
<?php
require_once("dbcontroller.php");
require_once("pagination.class.php");
$db_handle = new DBController();
$perPage = new PerPage();
$sql = "SELECT * from php_interview_questions";
$paginationlink = "getresult.php?page=";
$pagination_setting = $_GET["pagination_setting"];
$page = 1;
if(!empty($_GET["page"])) {
$page = $_GET["page"];
}
$start = ($page-1)*$perPage->perpage;
if($start < 0) $start = 0;
$query = $sql . " limit " . $start . "," . $perPage->perpage;
$faq = $db_handle->runQuery($query);
if(empty($_GET["rowcount"])) {
$_GET["rowcount"] = $db_handle->numRows($sql);
}
if($pagination_setting == "prev-next") {
$perpageresult = $perPage->getPrevNext($_GET["rowcount"], $paginationlink,$pagination_setting);
} else {
$perpageresult = $perPage->getAllPageLinks($_GET["rowcount"], $paginationlink,$pagination_setting);
}
$output = '';
foreach($faq as $k=>$v) {
$output .= '<div class="question"><input type="hidden" id="rowcount" name="rowcount" value="' . $_GET["rowcount"] . '" />' . $faq[$k]["question"] . '</div>';
$output .= '<div class="answer">' . $faq[$k]["answer"] . '</div>';
}
if(!empty($perpageresult)) {
$output .= '<div id="pagination">' . $perpageresult . '</div>';
}
print $output;
?>
Hi, I’m Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I’m currently available for freelance work.