jQuery AJAX Pagination
by Vincy. Last modified on June 1st, 2021.
In this tutorial, we are going to see the simple code for pagination using jQuery AJAX and PHP. This code will have first, last, previous, next and other pagination links. On clicking each link it invokes AJAX handler to request for limited page results from the database.
The steps for implementing jQuery AJAX pagination are,
Sending page request via AJAX.
Calculate query limit to retrieve data.
Create pagination links and apply styles.
Show results and pagination links.
Sending Page Request via AJAX
In this code, we are sending an initial request for a page getresult.php.
This page will do all server side functions and respond to the pagination request. AJAX handlers insert this response data into the target selectors.
function getresult(url) { $.ajax({
url: url,
type: “GET”,
data: {rowcount:$(“#rowcount”).val()},
success: function(data){ $(“#pagination”).html(data); },
error: function() {}
});
}
getresult(“getresult.php”);
Calculate Query Limit
Since loading bulk of data takes much time, the pagination is for the quick retrieve/load. So, we have to calculate the start and end limit based on the page request. The code is,
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=”;
$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);
Create Pagination Links and Apply Styles
For creating a total number of page links, we need to pass the database result count if found already.
if(empty($_GET[“rowcount”])) {
$_GET[“rowcount”] = $db_handle->numRows($sql);
}
$perpageresult = $perPage->perpage($_GET[“rowcount”], $paginationlink);
The function perpage will create all pagination links and apply styles based on the status of the page whether it is active or not applicable. The code is,
function perpage($count,$href) {
$output = ”;
if(!isset($_GET[“page”]))
$_GET[“page”] = 1;
if($this->perpage != 0)
$pages = ceil($count/$this->perpage);
if($pages>1) {
if($_GET[“page”] == 1)
$output = $output . ‘
<<
<
‘;
else
if(($_GET[“page”]-3)>0) {
if($_GET[“page”] == 1) $output = $output . ‘
1
‘;
else $output = $output . ‘
1
‘;
}
if(($_GET[“page”]-3)>1) {
$output = $output . ‘…’;
}
for($i=($_GET[“page”]-2); $i<=($_GET[“page”]+2); $i++) {
if($i<1)
continue;
if($i>$pages)
break;
if($_GET[“page”] == $i)
$output = $output . ‘
‘.$i.’
‘; else $output = $output . ‘
‘.$i.’
‘;
}
if(($pages-($_GET[“page”]+2))>1) {
$output = $output . ‘…’;
}
if(($pages-($_GET[“page”]+2))>0) {
if($_GET[“page”] == $pages) $output = $output . ‘
‘ . ($pages) .’
‘;
else $output = $output . ‘
‘ . ($pages) .’
‘;
}
if($_GET[“page”] < $pages)
else
$output = $output . ‘
>
>>
‘;
}
return $output;
}
Show Results and Pagination Links
Finally the requested PHP script will form the output HTML for printing database results and pagination link.
$output = ”;
foreach($faq as $k=>$v) {
$output .= ‘
‘;
$output .= ‘
‘;
}
if(!empty($perpageresult)) {
$output .= ‘
‘;
}
print $output;
Data printed above will be read as an AJAX response and inserted into target selector.
Refer AJAX pagination with PHP if you are looking for a PHP solution with jQuery.
success: function(data){
$(“#pagination”).html(data);
}
// AJAX Response will be Inserted
Comments to “jQuery AJAX Pagination”
Edwin says:
can you please share the SQL file of this script
Vincy says:
Hi Edwin, it should be available in the download.
Leave a ReplyYour email address will not be published. Required fields are marked *
Comment
Name *
Email *
Leave this empty *