Pagination using AJAX in PHP and MySQL
- Tech Area
- October 16, 2023
In this tutorial, We will learn how to make pagination using Jquery AJAX in PHP and MySQL. We are using numeric pagination to sort data from mysql database using AJAX.
Files used in this tutorial:
1- connection.php (database connection file)
2- index.php (table and AJAX script)
3- pagination.php (make dynamic pagination)
Below are the step by step process of how to make pagination Jquery AJAX.
Step 1: Create a Database connection
In this step, create a new file connection.php to create database connection.
connection.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
echo("connection terminated");
}
?>Step 2: Create index.php
In this step, create a new file index.php. This is the main file used to implement AJAX to make pagination.
This screenshot shows the pagination.
index.php
<html>
<head>
<title>AJAX Pagination</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-center">AJAX Pagination using Jquery AJAX</h2>
<br/>
<div id="result">
</div>
</div>
</body>
</html>Now use jquery AJAX script.
<script type="text/javascript">
$(document).ready(function(){
showdata();
});
function showdata(page)
{
$.ajax({
url: 'pagination.php',
method: 'post',
data: {page_no:page},
success: function(result)
{
$("#result").html(result);
}
});
}
$(document).on("click",".pagination a", function(){
var page = $(this).attr('id');
showdata(page);
});
</script>Step 3: Create new file for pagination
In this step, create a new file pagination.php. This file used to make dynamic numeric pagination.
pagination.php
<?php
include("connection.php");
$limit_page = 3;
$page="";
if(isset($_POST['page_no']))
{
$page = $_POST['page_no'];
}
else
{
$page = 1;
}
$offset = ($page-1)* $limit_page;
$fetch_query = mysqli_query($connection, "select * from tbl_registration limit $offset, $limit_page");
$output="";
$row = mysqli_num_rows($fetch_query);
if($row>0)
{
$output .='<table class="table table-bordered table-striped">
<thead style="background-color:#e3a53a;">
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Category</th>
<th>Phone</th>
<th>Address</th>
</thead>';
while($res = mysqli_fetch_array($fetch_query))
{
$output .="<tr>
<td>{$res['id']}</td>
<td>{$res['name']}</td>
<td>{$res['email']}</td>
<td>{$res['category']}</td>
<td>{$res['phone']}</td>
<td>{$res['address']}</td>
</tr>";
}
$output .="</table>";
$fetch_query = mysqli_query($connection,"select * from tbl_registration");
$row = mysqli_num_rows($fetch_query);
$total_page = ceil($row/$limit_page);
$output .='<ul class="pagination">';
for($i=1; $i<=$total_page; $i++)
{
if($i==$page)
{
$active ="active";
}
else
{
$active = "";
}
$output .= "<li class='{$active}'><a id='{$i}'>{$i}</a></li>";
}
$output .='</ul>';
echo $output;
}
?>Download Source Code
Join 10,000+ subscriber