jQuery ajax pagination in php is the best helpful for the data listing where a big and large number of data records server side are listed from the mysql or many more any database. It usefuls to load more the create php script to a get dynamic data faster by diving some bunch of the records in multiple pages. The php pagination functionality manage can be step by step integrated using PHP server sidescripts. basically, the PHP Pagination load more data by navigating the some advance links with page reload. If you want to improve the UI of the main webpage and crate the data list product-friendly, jquery Ajax Pagination is the best selections.
Ajax Pagination using jQuery with PHP and MySQL
Here I am using step by step main three file for send array data to php full script file using jquery ajax source code.
- index.php
- pagination.php
- database.php
Also Best ajax pagination in php Examples
- how to create pagination links in php
- dynamic pagination in php with mysql example
- how to use the pagination in php
- pagination in php example
- pagination code in php with next and previous
- Pagination in PHP
Step: 1 Data List with Ajax Pagination
index.php
Initially, a limited number of records are fetched from the database and listed with the jquery Ajax pagination links. When the paging link is clicked, the Ajax request is initiated as well as send to the server-side script.
<?php
include('database.php');
$limit = 4;
$sql = "SELECT COUNT(id) FROM product_data";
$rs_result = mysqli_query($conn, $sql);
$row = mysqli_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP Pagination using jQuery AJAX - demo step by step</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Employees</b>Add New Employee</span></a>
<a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons"></i> <span>Delete</span></a>
</div>
</div>
</div>
<div id="target-content">loading...</div>
<div class="clearfix">
<ul class="pagination">
<?php
if(!empty($total_pages)){
for($i=1; $i<=$total_pages; $i++){
if($i == 1){
?>
<li class="pageitem active" id="<?php echo $i;?>"><a href="JavaScript:Void(0);" data-id="<?php echo $i;?>" class="page-link" ><?php echo $i;?></a></li>
<?php
}
else{
?>
<li class="pageitem" id="<?php echo $i;?>"><a href="JavaScript:Void(0);" class="page-link" data-id="<?php echo $i;?>"><?php echo $i;?></a></li>
<?php
}
}
}
?>
</ul>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#target-content").load("pagination.php?page=1");
$(".page-link").click(function(){
var id = $(this).attr("data-id");
var select_id = $(this).parent().attr("id");
$.ajax({
url: "pagination.php",
type: "GET",
data: {
page : id
},
cache: false,
success: function(dataResult){
$("#target-content").html(dataResult);
$(".pageitem").removeClass("active");
$("#"+select_id).addClass("active");
}
});
});
});
</script>
</body>
</html>
Step: 2 Get Pagination Data
create a pagination.php
- get the data based on the paging limit & offset.
- Render data list with pagination links.
- Return the HTML view of the data list.
<?php
include('database.php');
$limit = 5;
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $limit;
$sql = "SELECT * FROM product_data ORDER BY name ASC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql);
?>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>product desc</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysqli_fetch_array($rs_result)) {
?>
<tr>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["product_desc"]; ?></td>
</tr>
<?php
};
?>
</tbody>
</table>
Step: 3 Database Configuration
create a simple database.php
<?php
$servername = "localhost";
$productname = "root";
$password = "";
$db="pakainfo";
$conn = mysqli_connect($servername, $productname, $password,$db);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about ajax pagination in php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.