PHP – Infinite Scroll Pagination using JQuery Ajax Example
In this post we will give you information about PHP – Infinite Scroll Pagination using JQuery Ajax Example. Hear we will give you detail about PHP – Infinite Scroll Pagination using JQuery Ajax ExampleAnd how to use it also give you demo for it if it is necessary.
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 >
<h2 >PHP infinite scroll pagination</h2>
<br/>
<div 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 style="display:none">
<p><img src="http://demo.onlinecode/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 id="<?php echo $post['id']; ?>">
<h3><a href=""><?php echo $post['title']; ?></a></h3>
<p><?php echo $post['description']; ?></p>
<div >
<button >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
$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….
Hope this code and post will helped you for implement PHP – Infinite Scroll Pagination using JQuery Ajax Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs