PHP – Infinite Scroll Pagination using JQuery Ajax Example

admin | Posted on May 13, 2021 |

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="https://scripts.guru/wp-content/uploads/2018/12/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/

Leave a Reply Cancel reply