Morioh
Login
Iliana Welch

Iliana Welch

1 year ago

How to Create Ajax Pagination with jQuery and PHP

There are the Following The simple About Dynamic Pagination With Ajax Full Information With Example and source code.

As I will cover this Post with live Working example to develop Create Pagination with MySQL, PHP and jQuery, so the Previous Pagination using jQuery with PHP and MySQL is used for this example is following below.

Pagination with PHP Without Page Refresh – Learn jQuery AJAX Pagination with PHP Without Page Refresh starting from it’s overview Search insert, Update, retrieve, Delete, Filter, upload image etc .

Create Database Table

--
-- Database: `registration`
-- --------------------------------------------------------
-- Table structure for table `products`

CREATE TABLE `products` (
`id` int(11) NOT NULL,
`shop_name` varchar(50) NOT NULL,
`productname` varchar(50) NOT NULL,
`pcode` varchar(50) NOT NULL,
`price` int(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Database Connectivity

connect_db.php

<?php

// database configuration

$sernamename = "localhost";
$username = "root";
$passoword = "";
$databasename= "registration";

// create database connection
$con = mysqli_connect($sernamename, $username,$passoword,$databasename);

// check connection
if ($con->connect_error) {
die("Connection failed". $con->connect_error);
}

?>

Create HTML Page Show Data list from Database

index.php

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax Pagination using jQuery with PHP and MySQL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
<h2>jQuery Ajax Pagination using jQuery with PHP and MySQL</h2>
</div>

<div class="container">
<div class="row">
<div class="col-md-12">
<div id="product-data">

</div>
</div>
</div>
</div>

</body>
</html>

jQuery AJAX Code for fetch Data and Pagination

<script type="text/javascript">
$(document).ready(function(){
function getAllData(page){
$.ajax({
url : "list-products.php",
type : "POST",
cache: false,
data : {slide_no:page},
success:function(response){
$("#product-data").html(response);
}
});
}
getAllData();

// Pagination Source code
$(document).on("click", ".pagination li a", function(e){
e.preventDefault();
var pageId = $(this).attr("id");
getAllData(pageId);
});
});
</script>

Create PHP page for fetch Data list and Pagination

list-products.php

<?php

// Connect database

require_once('connect_db.php');

$limit = 5;

if (isset($_POST['slide_no'])) {
$slide_no = $_POST['slide_no'];
}else{
$slide_no = 1;
}

$offset = ($slide_no-1) * $limit;

$query = "SELECT * FROM products LIMIT $offset, $limit";

$result = mysqli_query($con, $query);

$output = "";

if (mysqli_num_rows($result) > 0) {

$output.="<table class='table'>
<thead>
<tr>
<th>Id</th>
<th>Shop Name</th>
<th>Product Name</th>
<th>Product code</th>
<th>Price</th>
</tr>
</thead>
<tbody>";
while ($row = mysqli_fetch_assoc($result)) {

$output.="<tr>
<td>{$row['id']}</td>
<td>{$row['shop_name']}</td>
<td>{$row['productname']}</td>
<td>{$row['pcode']}</td>
<td>{$row['price']}</td>
</tr>";
}
$output.="</tbody>
</table>";

$sql = "SELECT * FROM products";

$all_products = mysqli_query($con, $sql);

$totalRecords = mysqli_num_rows($all_products);

$totalPage = ceil($totalRecords/$limit);

$output.="<ul class='pagination justify-content-center' style='margin:20px 0'>";

for ($i=1; $i <= $totalPage ; $i++) {
if ($i == $slide_no) {
$active = "active";
}else{
$active = "";
}
$output.="<li class='page-item $active'><a class='page-link' id='$i' href=''>$i</a></li>";
}
$output .= "</ul>";

echo $output;
}
?>


ajax pagination

 

Web Programming Tutorials Example with Demo

 

I hope you get an idea about ajax pagination javascript.

#jquery #php  

How to Create Ajax Pagination with jQuery and PHP
1.00 GEEK