Pagination in php with jquery and ajax
Project: in this project we will learn how to make pagination with previous and next button using jquery & ajax.
Warning: We must must add both jquery and bootstrap javascript files in project directory otherwise feature will not work.
To make pagination first we have to insert some data in database that we have done already (click link below).
How to insert data in database Click here
Then we have to fetch all records from database table and display in table.
How to fetch data from database Click here
Pagination table
index.php
<!DOCTYPE html>
<html>
<head>
<title>Codetechinfo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style>
.page-item{
padding:7px;
border:1px solid black;
cursor:pointer;
}
.prev,.next{
background:#013243;
}
</style>
</head>
<body>
<br><br>
<div class="container w-50">
<h1 class="text-white text-center bg-success rounded w-100">Pagination</h1>
<div class="table" id="pagination_data">
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
pagination();
function pagination(page){
$.ajax({
url:"paging.php",
method:"POST",
data:{page:page},
success: function(data){
$("#pagination_data").html(data);
}
})
}
//This is for middle number button
$("body").on("click",".pagination_link", function(){
var page = $(this).attr("id");
pagination(page);
});
//This is for previous button
$("body").on("click",".prev", function(){
var prev = $(this).attr("id");
pagination(prev);
});
//This is for next button
$("body").on("click",".next", function(){
var next = $(this).attr("id");
pagination(next);
});
})
</script>
</body>
</html>
Database Connection
Database-> dbdemo Table-> customers
CREATE TABLE `customers` (
`cid` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`username` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL
);
Create connection with database
myproject/dbcon.php
dbcon.php
$dbhost ="localhost";
$dbuser ="root";
$dbpswd ="";
$dbname ="dbdemo";
$dbcon= mysqli_connect($dbhost,$dbuser,$dbpswd,$dbname);
if($dbcon){
//echo "Connected............!!!";
return $dbcon;
exit();
}else{
die("Connection failed ? ? ?". mysqli_error($dbcon));
}
mysqli_close($dbcon);
Insert some records in database customers table.
Fetch all records and display in table.
Process to make pagination
Process to make pagination with previous and next button.
paging.php
<?php include("dbcon.php"); //This is database connection file
$record_per_page = 3;
$page ='';
$output='';
if(isset($_POST['page'])){
$page = $_POST['page'];
}else{
$page = 1;
}
$start_from = ($page -1) * $record_per_page;
$sql = "SELECT * FROM customers ORDER BY cid DESC LIMIT $start_from, $record_per_page";
$result = mysqli_query($dbcon,$sql);
$output .="
<table class='table table-bordered'>
<tr>
<th width='50%'>cid</th>
<th width='50%'>Name</th>
<th width='50%'>email</th>
</tr>
";
while($row = mysqli_fetch_array($result)){
$output .='
<tr>
<td>'.$row["cid"].'</td>
<td>'.$row["username"].'</td>
<td>'.$row["email"].'</td>
</tr>
';
}
$output .="</table>";
$page_query = "SELECT * FROM customers ORDER BY cid DESC";
$page_result = mysqli_query($dbcon, $page_query);
$total_records = mysqli_num_rows($page_result);
$total_pages = ceil($total_records/$record_per_page);
if($page > 1){
$prev = $page-1;
$output .= "<a class='page-item pl-3 pr-3 text-white prev' id='".$prev."'>Previous</a>";
}
for ($i=1; $i <= $total_pages; $i++) {
if($i==$page){
$output .= "<a class='page-item pl-3 pr-3 bg-success text-white'>$i</a>";
}else{
$output .= "<a class='page-item pl-3 pr-3 pagination_link' id='".$i."'>$i</a>";
}
}
if($total_pages > $page){
$next = $page+1;
$output .= "<a class='page-item pl-3 pr-3 text-white next' id='".$next."'>Next</a>";
}
echo $output;
css and js folder
You must download and include bootstrap css and javascript source files for good interface OR You can add cdn link from bootstrap website.
myproject/css
bootstrap.min.css
myproject/js
bootstrap.min.css
jquery.min.css