Infinite Scroll Pagination Using PHP And JQuery
In web development there are three ways to implement pagination. Pagination,Load more data and Infinite scroll. Pagination means separating content into multiple page, load more means user has option to click on load more button to show more content and infinite scroll means user will continuously scroll down the page and get new data.
Pagination is a technique where datas are divided into multiple pages instead of single pages. User has to click on page no then user will get data according to page number. In this technique we have two options that is show page number or show next and previous button. This is the navigation link and they allow the user to access the web page according to page number.
One of the most popular example of pagination is google search result. Where search engine display page into multiple pages.
Load more is a technique where user has option to click on load more button then user will get more results. In this technique some data is displayed on a page instead of all data. Whenever user will click on load more button next data will be displayed.
While pagination divide pages into multiple pages , infinite scroll allows us to browse through the entire content in single web page. Once scroll bar reaches to the bottom of the page new content will populate automatically.
Infinite scroll is so popular technique in social media websites like Facebook and Twitter.
This is especially important for mobile devices where scrolling is more intuitive for the devices.
The Advantages of Infinite Scroll:.
| 1 : User Engagement. |
| 2 : Scrolling is Better Than Clicking |
| 3 : Scrolling is Good For Mobile Devices |
| 4 : Users Like to Scroll. |
Below are the steps to implement infinite scroll pagination in PHP Using Jquery.
Step 1 : Create index.php file and write below code.
<?php
include('connection.php');
$mysqli = new mysqli($hostName, $username, $password, $dbname);
$sql = "SELECT * FROM countries LIMIT 30";
$result = $mysqli->query($sql);
$sn=1;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Infinite Scroll Pagination Using JQuery And Ajax In PHP</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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row content">
<h3 class="text-success text-center">Infinite Scroll Pagination Using JQuery And Ajax In PHP</h3>
<br>
<div class="col-sm-12">
<div class="row">
<?php while($row = mysqli_fetch_assoc($result)){ ?>
<div class="col-sm-3">
<div class="well" id="<?php echo $row['id']; ?>">
<h4><?=$sn++?> : <?=$row['name']?></h4>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
var lastId = $(".well:last").attr("id");
$.ajax({
url: 'showMoreData.php?lastId=' + lastId,
type: "get",
beforeSend: function (){
$('.ajax-loader').show();
},
success: function (data) {
$(".row").append(data);
}
});
}
});
</script>
</body>
</html>
Step 2 : Create showMoreData.php file and write below code.
<?php
include('connection.php');
$mysqli = new mysqli($hostName, $username, $password, $dbname);
$lastid = $_GET['lastId'];
$sql = "SELECT * FROM countries where id>'".$lastid."' LIMIT 30";
$result = $mysqli->query($sql);
$sn=$lastid+1;
while($row = mysqli_fetch_assoc($result)) {
$name = $row['name'];
if($name!=''){
echo "<div class=col-sm-3>";
echo "<div class=well id='".$row['id']."'>";
echo "<h4>".$sn++;" ";
echo " ";
echo $name;
echo "</h4>";
echo "</div>";
echo "</div>";
}
}
?>
