Infinite scroll pagination using PHP jquery and ajax: have you seen on Facebook, Twitter, or other websites that automatically loaded content when scrolling down to the web page.
Follow the below steps :
Step 1: Create a Database and Table
CREATE TABLE `products` (
`id` int(11) NOT NULL,
`title` varchar(255) NOT NULL,
`description` text NOT NULL,
`price` varchar(255) NOT NULL,
`status` int(1) NOT NULL,
`created_at` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `products` ADD PRIMARY KEY (`id`);
ALTER TABLE `products`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=29;
COMMIT;Step 2: create a config.php file connect to the database
#config.php
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$database = "mouse_scroll_pagination_php";
$conn = mysqli_connect($hostname, $username, $password, $database);
?>Step 3: Set the limit and get the data
limit the data to show 10 products per row. For that, we will take a constant variable to be able to show 10 products per row.
#pagination.php
<?php
$query = "select * from products order by id desc limit $row,$row_per_page ";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)) {
?>
<tr class="product" id="product_<?php echo $row['id']; ?>">
<td><?php echo $row['title']; ?></td>
<td><?php echo $row['description']; ?></td>
<td><?php echo $row['price']; ?></td>
<td><?php echo $row['created_at']; ?></td>
</tr>
<?php } ?>Step 4: Create index.php file and show the data
#index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP Ajax tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
var position = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
if (position == bottom) {
var row = Number($('#row').val());
var allcount = Number($('#all_product_count').val());
var rowperpage = 10;
row = row + rowperpage;
if (row <= allcount) {
$('.ajax-load').show();
var url = "pagination.php";
$('#row').val(row);
$.ajax({
url: url,
type: 'post',
data: {row: row},
success: function(response) {
$('.ajax-load').hide();
$(".product:last").after(response).show().fadeIn("slow");
}
});
}
else {
$('#remove').remove();
$(".product:last").after('No Data Available');
}
}
});
});
</script>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th,td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<?php
include('config.php');
$row = 0;
$row_per_page = 10;
$count_product_query = "SELECT count(*) as allcount FROM products";
$count_product_result = mysqli_query($conn, $count_product_query);
$count_product_fetch = mysqli_fetch_array($count_product_result);
$all_product_count = $count_product_fetch['allcount'];
?>
<div class="container">
<h2>Product Table</h2>
<div style="overflow-x:auto;">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
<th>Create</th>
</tr>
</thead>
<tbody>
<?php
$query = "select * from products order by id desc limit $row,$row_per_page ";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)) {
?>
<tr class="product" id="product_<?php echo $row['id']; ?>">
<td><?php echo $row['title']; ?></td>
<td><?php echo $row['description']; ?></td>
<td><?php echo $row['price']; ?></td>
<td><?php echo $row['created_at']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<input type="hidden" id="row" value="0">
<input type="hidden" id="all_product_count" value="<?php echo $all_product_count; ?>">
</div>
<div class="row ajax-load" style="display:none;">
<div class="col-lg-12" style="text-align: center;"><img src="loader.gif" width"100px" height="100px"/></div>
</div>
</div>
</body>
</html>When the user scrolls automatically data appends to the tables look at the screenshot
OUTPUT:
