PHP Ajax Infinite Scroll Pagination Example

By Hardik Savani May 14, 2024 Category : PHP

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

Read Also: How to Add JQuery Modal Popup in PHP?

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:

Read Also: How to Check if String Contains Specific Word in Laravel?
http://localhost:8000/

I hope it can help you....

Tags :
Previous

PHP CKEditor Custom File Upload Example
Next

Laravel Grayscale Image Generate Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares