Skip to content

All topics  /  PHP

AJAX Pagination with PHP Without Page Refresh

PHP ·

Teams applying “AJAX Pagination with PHP Without Page Refresh” in a production project can use the official resource 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.

Hi friends,

In this post, we will learn how to PHP Ajax load page without refresh. i explained simply step by step how to PHP Ajax pagination without reloading page. Here you will learn pagination without page refresh in PHP Ajax. This tutorial will give you simple example of Ajax pagination using jQuery with PHP and MySQL.

I will give you simple Example of how to Ajax pagination in PHP with next and previous.

So let's see bellow example:

db_connect.php 

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "demos";
    $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
?>

index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AJAX Pagination with PHP Without Page Refresh - Nicesnippets.com</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="plugin/simple-bootstrap-paginator.js"></script>
</head>
<body>
    <?php  
        include_once("db_connect.php");
        $perPage = 5;
        $sqlQuery = "SELECT * FROM developers";
        $result = mysqli_query($conn, $sqlQuery);
        $totalRecords = mysqli_num_rows($result);
        $totalPages = ceil($totalRecords/$perPage)
    ?>
    <div class="container mt-5">    
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-3">
                    <div class="card-header bg-success text-white text-center">
                        <h4>AJAX Pagination with PHP Without Page Refresh - Nicesnippets.com</h4> 
                    </div>
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Age</th>
                                <th>Address</th>
                                <th>Skills</th>
                                <th>Designation</th>
                            </tr>
                        </thead>
                        <tbody id="content"></tbody>
                    </table>   
                </div>
                <div id="pagination"></div>    
                <input type="hidden" id="totalPages" value="<?php echo $totalPages; ?>">    
            </div>
        </div>    
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            var totalPage = parseInt($('#totalPages').val());   
            console.log("==totalPage=="+totalPage);
            var pag = $('#pagination').simplePaginator({
                totalPages: totalPage,
                maxButtonsVisible: 5,
                currentPage: 1,
                nextLabel: 'Next',
                prevLabel: 'Prev',
                firstLabel: 'First',
                lastLabel: 'Last',
                clickCurrentPage: true,
                pageChange: function(page) {            
                    $("#content").html('<tr><td colspan="6"><strong>loading...</strong></td></tr>');
                    $.ajax({
                        url:"load_data.php",
                        method:"POST",
                        dataType: "json",       
                        data:{page: page},
                        success:function(responseData){
                            $('#content').html(responseData.html);
                        }
                    });
                }       
            });
        });
    </script>
</body>
</html>

load_data.php

<?php
    include_once("db_connect.php"); 
    $perPage = 5;
    $page = 0;
    if (isset($_POST['page'])) { 
        $page  = $_POST['page']; 
    } else { 
        $page=1; 
    };
    $startFrom = ($page-1) * $perPage;  
    $sqlQuery = "SELECT id, name, age, address, skills, designation FROM developers ORDER BY id ASC LIMIT $startFrom, $perPage";  
    $result = mysqli_query($conn, $sqlQuery); 
    $paginationHtml = '';
    while ($row = mysqli_fetch_assoc($result)) {  
        $paginationHtml.='<tr>';  
        $paginationHtml.='<td>'.$row["id"].'</td>';
        $paginationHtml.='<td>'.$row["name"].'</td>';
        $paginationHtml.='<td>'.$row["age"].'</td>'; 
        $paginationHtml.='<td>'.$row["address"].'</td>';
        $paginationHtml.='<td>'.$row["skills"].'</td>';
        $paginationHtml.='<td>'.$row["designation"].'</td>'; 
        $paginationHtml.='</tr>';  
    }
    $jsonData = array(
        "html"  => $paginationHtml, 
    );
    echo json_encode($jsonData); 
?>

Output:

I hope it will help you....

# PHP