PHP – Infinite Scroll Pagination using JQuery Ajax Example

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:


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:


'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,



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:



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);


Also see:Dynamic Autocomplete search using Bootstrap Typeahead JS Example

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.


<!DOCTYPE html>



<title>PHP infinite scroll pagination</title>

<script src=""></script>

<link rel="stylesheet" href="">

<style type="text/css">


background: #e1e1e1;

padding: 10px 0px;

width: 100%;





<div >

<h2 >PHP infinite scroll pagination</h2>


<div id="post-data">



$sql = "SELECT * FROM posts


$result = $mysqli->query($sql);


<?php include('data.php'); ?>



<div style="display:none">

<p><img src="http://demo.onlinecode/plugin/loader.gif">Loading More post</p>


<script type="text/javascript">

$(window).scroll(function() {

if($(window).scrollTop() + $(window).height() >= $(document).height()) {

var last_id = $(".post-id:last").attr("id");




function loadMoreData(last_id){



url: '/loadMoreData.php?last_id=' + last_id,

type: "get",

beforeSend: function()










.fail(function(jqXHR, ajaxOptions, thrownError)


alert('server not responding...');






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.



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>


<hr style="margin-top:5px;">





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.




$sql = "SELECT * FROM posts


$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:

Also see:PHP Codeigniter – Ajax Infinite Scroll Pagination Example


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

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

15  +    =  20

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US