Skip to content

All topics  /  PHP

How to use Pagination with Load More using Ajax in PHP?

PHP

Teams applying “How to use Pagination with Load More using Ajax in PHP?” in a production project can use the implementation notes to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the PHP project and test it against the project’s actual database and runtime.

Mar 21, 2022

Hi friends,

In this post, we will learn how to use pagination with Load More using Ajax in PHP. i explained simply step by step how to ajax load more pagination in PHP. Here you will learn how to make ajax load more content, using button pagination in PHP. This tutorial will give you simple example of how to load more results in PHP, Ajax and MySQL from Database.

I will give you simple Example of how to Ajax based load more results with jQuery, MySQL and PHP.

So let's see bellow example:

index.php


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PHP Ajax Pagination with Load More - Nicesnippets.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <div class="card-header text-center bg-dark text-white">
                   <h4>PHP Ajax Pagination with Load More - Nicesnippets.com</h4> 
                </div>
                <table class="table table-bordered" id="loadData">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Age</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            loadMoreData();
            function loadMoreData(page){
                $.ajax({
                    url : "load.php",
                    type: "POST",
                    cache:false,
                    data:{page_no:page},
                    success:function(data){
                        if (data) {
                            $("#pagination").remove();
                            $("#loadData").append(data);
                        }else{
                            $(".loadbtn").prop("disabled", true);
                            $(".loadbtn").html('That is All');
                        }
                    }
                });
            }

          
            $(document).on('click', '.loadbtn', function(){
                $(".loadbtn").html('Loading...');
                var pId = $(this).data("id");
                loadMoreData(pId);
            });
        });
    </script>
</body>
</html>

load.php 

<?php
    $sernamename = "localhost";
    $username     = "root";
    $passoword   = "";
    $databasename= "demos";
    $con = new mysqli($sernamename, $username,$passoword,$databasename);
    if ($con->connect_error) {
      die("Connection failed". $con->connect_error);
    }
    $limit = 5;
    if (isset($_POST['page_no'])) {
      $page = $_POST['page_no'];
    }else{
      $page = 0;
    }
    $sql = "SELECT * FROM users LIMIT $page, $limit";

   
    $query = $con->query($sql);
    if ($query->num_rows > 0) {

      
        $output = "";
        $output .= "<tbody>";
        while ($row = $query->fetch_assoc()) {

         
            $last_id = $row['id'];
            $output.="<tr>
                        <td>{$row["id"]}</td>
                        <td>{$row["name"]}</td>
                        <td>{$row["username"]}</td>
                        <td>{$row["email"]}</td>
                        <td>{$row["age"]}</td>
                    </tr>";
        }
        $output .= "<tbody>";

             
        $output .= "<tbody id='pagination'>
                        <tr>
                            <td colspan='5'><button class='btn btn-success loadbtn' data-id='{$last_id}' style='margin-left:500px'>Load More</button></td>
                        </tr>
                    </tbody>";
        echo $output;     
    }
?>

Output:

I hope it will help you....

More on this topic