Load More Pagination using AJAX in PHP and MySQL
- Tech Area
- October 18, 2023
In this tutorial, We will learn how to make load more pagination using Jquery AJAX in PHP and MySQL. We are using button to load more pagination from mysql database using AJAX.
Files used in this tutorial:
1- connection.php (database connection file)
2- index.php (table and AJAX script)
3- load-more.php (load more pagination)
Below are the step by step process of how to make pagination using 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 load more pagination.
This screenshot shows the load more pagination.
index.php
<html>
<head>
<title>AJAX Load More Data</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">Load More Data using Jquery AJAX</h2>
<br/>
<table id="result" 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>
</table>
</div>
</body>
</html>Now use jquery AJAX script.
<script type="text/javascript">
$(document).ready(function(){
function loaddata(page)
{
$.ajax({
url: 'load-more.php',
method: 'post',
data: {page_no: page},
success: function(result)
{
if(result!='')
{
$("#load_more").remove();
$("#result").append(result);
}
else
{
$("#load_btn").html("No More Data");
$("#load_btn").prop("disabled",true);
}
}
});
}
loaddata();
$(document).on("click","#load_btn",function(){
var page = $(this).data('id');
loaddata(page);
});
});
</script>Step 3: Create new file for load more pagination
In this step, create a new file load-more.php. This file used to make dynamic load more pagination.
load-more.php
<?php
include("connection.php");
$limit_page = 3;
$page = "";
if(isset($_POST['page_no']))
{
$page = $_POST['page_no'];
}
else
{
$page = 0;
}
$fetch_query = mysqli_query($connection, "select * from tbl_registration limit $page, $limit_page");
$row = mysqli_num_rows($fetch_query);
if($row>0)
{
$output="";
while($res = mysqli_fetch_array($fetch_query))
{
$last_id = $res['id'];
$output .="<tbody><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></tbody>";
}
$output .="<tbody id='load_more'>
<tr>
<td colspan='6'><center><button class='btn btn-primary' id='load_btn' data-id='{$last_id}'>Load More</button></center></td></tr></tbody>";
echo $output;
}
?>Download Source Code
Join 10,000+ subscriber