Home » jQuery ajax pagination in php MySQLi

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.

Read Also:  Laravel Redirect Tutorial Example From Scratch

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel Pass Array whereIN clause Example using query builder
  2. Read Also:  CodeIgniter Simple User Registration and Login System
  3. Read Also:  Laravel 5.7 Jquery Ajax CRUD(insert update delete)
  4. Read Also:  Advanced jQuery Ajax Pagination PHP MySQL using jQuery
  5. Read Also:  WooCommerce Webhooks verification in PHP
  6. Read Also:  jquery Drag and Drop draggable droppable Example
  7. Read Also:  PHP String Explode and Implode Function
  8. Read Also:  pagination in php using ajax
  9. Read Also:  Laravel 6 Set Extra where condition Examples
  10. Read Also:  Install PHP Accelerator using Xampp

Leave a Comment

Your email address will not be published. Required fields are marked *