jQuery ajax pagination in php MySQLi

Today, We want to share with you ajax pagination in php.In this post we will show you pagination without refreshing page php, hear for ajax pagination using jquery with php and mysql we will give you demo and example for implement.In this post, we will learn about Advanced jQuery Ajax Pagination PHP MySQL using jQuery with an example.

simple jQuery ajax pagination in php

In this tutorial we learn to all about ajax pagination in php Examples like as a simple pagination in php, pagination without refreshing page php, pagination in php mysqli, dynamic pagination in php with mysql example or many more.

build Ajax Pagination in PHP

4cgandhi_shop/
├── gloablConf.php
├── index.php
├── fetchArticles.php
├── CustomPagination.class.php
├── js/
│   └── jquery.min.js
└── css/
    └── style.css

CustomPagination class

include_once 'CustomPagination.class.php'; 
  
$customPaginationConfig = array( 
    'baseURL' => 'fetchArticles.php', 
    'totalRows' => $rowCount, 
    'perPage' => 10, 
    'contentDiv' => 'dataContainer' 
); 
$pagination =  new CustomPagination($customPaginationConfig);

Display pagination links

<?php echo $pagination->createLinks(); ?>

Create Database Table

CREATE TABLE `articles` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Database Configuration (gloablConf.php)

<?php  
$dbHost     = "localhost"; 
$dbUsername = "root"; 
$dbPassword = "root"; 
$dbName     = "codexworld"; 
 
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 
  
if ($db->connect_error) { 
    die("Connection failed: " . $db->connect_error); 
}

Data List with Ajax Pagination (index.php)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Loading Image

<script>
$( document ).ajaxStart(function() {
    $('.loading-overlay').show();
});

$( document ).ajaxStop(function() {
    $('.loading-overlay').hide();
});
</script>

Add Pagination:

<div class="article-wrapper">
    <div class="loading-overlay"><div class="overlay-content">Processing...</div></div>
	
    <div id="articleContent">
        <?php 
        include_once 'CustomPagination.class.php'; 
         
        require_once 'gloablConf.php'; 
         
        $baseURL = 'fetchArticles.php'; 
        $limit = 5; 
         
        $query   = $db->query("SELECT COUNT(*) as rowNum FROM articles"); 
        $response  = $query->fetch_assoc(); 
        $rowCount= $response['rowNum']; 
          
        $customPaginationConfig = array( 
            'baseURL' => $baseURL, 
            'totalRows' => $rowCount, 
            'perPage' => $limit, 
            'contentDiv' => 'articleContent' 
        ); 
        $pagination =  new CustomPagination($customPaginationConfig); 
          
        $query = $db->query("SELECT * FROM articles ORDER BY id DESC LIMIT $limit"); 
         
        if($query->num_rows > 0){ 
        ?>

            <div class="article-list">
            <?php while($row = $query->fetch_assoc()){ ?>
                <div class="list-item"><a href="javascript:void(0);"><?php echo $row["title"]; ?></a></div>
            <?php } ?>
            </div>
			
            <?php echo $pagination->createLinks(); ?>
        <?php } ?>
    </div>
</div>

Get CustomPagination Data

fetchArticles.php

<?php 
if(isset($_POST['page'])){ 
    include_once 'CustomPagination.class.php'; 
     
    require_once 'gloablConf.php'; 
      
    $baseURL = 'fetchArticles.php'; 
    $offset = !empty($_POST['page'])?$_POST['page']:0; 
    $limit = 5; 
     
    $query   = $db->query("SELECT COUNT(*) as rowNum FROM articles"); 
    $response  = $query->fetch_assoc(); 
    $rowCount= $response['rowNum']; 
     
    $customPaginationConfig = array( 
        'baseURL' => $baseURL, 
        'totalRows' => $rowCount, 
        'perPage' => $limit, 
        'currentPage' => $offset, 
        'contentDiv' => 'articleContent' 
    ); 
    $pagination =  new CustomPagination($customPaginationConfig); 
 

    $query = $db->query("SELECT * FROM articles ORDER BY id DESC LIMIT $offset,$limit"); 
     
    if($query->num_rows > 0){ 
    ?> 

        <div class="article-list"> 
        <?php while($row = $query->fetch_assoc()){ ?> 
            <div class="list-item"><a href="javascript:void(0);"><?php echo $row["title"]; ?></a></div> 
        <?php } ?> 
        </div> 
         

        <?php echo $pagination->createLinks(); ?> 
<?php 
    } 
} 
?>

I hope you get an idea about ajax pagination in php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.