PHP Ajax Infinite Scroll Pagination Example
Today, we will learn how to implement simple infinite scroll using jquery, ajax, php and mysql example. After complete this example you will get load more data on scroll of your page.
Generally, sometime we require to make load more latest feed or post etc when you scroll like on facebook, twitter, linkedin etc, it is require when you have lots of data.When you reach at bottom of page it will load more data using jquery ajax. In this example you can easily built infinite scroll pagination using ajax. we will load more data using jquery ajax. In today, infinite scroll take places of traditional paginations. Infinite scroll also known as lazy scroll.
Ok, so you can simple implement infinite scroll in your php application by following few step from scratch. I also provide demo for infinite scroll example, so you can see there. In this example we will create "posts" table and you have to add some manually dummy data. So, just follow bellow step and you will get layout as bellow:
Preview:
Step 1: Create posts table
In this step we will create new new table "posts" in database. You can use following SQL Query for create "posts" table. So let's create using bellow sql query:
item table:
CREATE TABLE IF NOT EXISTS `posts` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`description` text COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;
Step 2: Create DB Configuration File
In this step, we require to create database configuration file, here we will set database name, username and password. So let's create "db_config.php" file on your root directory and put bellow code:
db_config.php
<?php
define (DB_USER, "root");
define (DB_PASSWORD, "root");
define (DB_DATABASE, "sole");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
?>
Step 3: Create Index.php File
Here, we will create index.php file, in this file we will write code for display data and jquery ajax code. So let's create index.php file on your root directory and put bellow code.
index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP infinite scroll pagination</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
.ajax-load{
background: #e1e1e1;
padding: 10px 0px;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">PHP infinite scroll pagination</h2>
<br/>
<div class="col-md-12" id="post-data">
<?php
require('db_config.php');
$sql = "SELECT * FROM posts
ORDER BY id DESC LIMIT 8";
$result = $mysqli->query($sql);
?>
<?php include('data.php'); ?>
</div>
</div>
<div class="ajax-load text-center" style="display:none">
<p><img src="http://demo.itsolutionstuff.com/plugin/loader.gif">Loading More post</p>
</div>
<script type="text/javascript">
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
var last_id = $(".post-id:last").attr("id");
loadMoreData(last_id);
}
});
function loadMoreData(last_id){
$.ajax(
{
url: '/loadMoreData.php?last_id=' + last_id,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data)
{
$('.ajax-load').hide();
$("#post-data").append(data);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('server not responding...');
});
}
</script>
</body>
</html>
Step 4: Create data.php File
In this step we will create data.php file, in this file we will print all database table data layout, so let's create another file data.php on your root path and put bellow code.
data.php
<?php
while($post = $result->fetch_assoc()){
?>
<div class="post-id" id="<?php echo $post['id']; ?>">
<h3><a href=""><?php echo $post['title']; ?></a></h3>
<p><?php echo $post['description']; ?></p>
<div class="text-right">
<button class="btn btn-success">Read More</button>
</div>
<hr style="margin-top:5px;">
</div>
<?php
}
?>
Step 5: Create loadMoreData.php File
In last step, we need to create loadMoreData.php file, this fill will call using ajax an return another records. So let's create loadMoreData.php on your root directory and put bellow code.
loadMoreData.php
<?php
require('db_config.php');
$sql = "SELECT * FROM posts
WHERE id < '".$_GET['last_id']."' ORDER BY id DESC LIMIT 8";
$result = $mysqli->query($sql);
$json = include('data.php');
echo json_encode($json);
?>
Ok, now we are ready to run our Infinite Scroll example. Make sure you have some dummy records on posts table. So let's run bellow command on your root directory for quick run:
php -S localhost:8000
Now you can open bellow URL on your browser:
http://localhost:8000/
I hope it can help you....
