Ajax Pagination enhances the user experience when viewing paginated material on a website page. Using jQuery and Ajax, the navigation file is recorded from the server without requiring a page refresh. This article will show you how to use the column sorting feature in PHP to improve the Ajax pagination capability.

The majority of the time, the records are extracted from the data and displayed in an HTML table. Along with pagination, the row filtering function is highly beneficial for improving the user experience of the content list table. The header rows of the HTML table will be editable, allowing the user to sort the entries in lowest to highest. Ajax pagination with pillar sort enables users to easily access a huge data list via pagination links and sort the data list by selecting columns in lowest to highest.

The following functionality will be implemented in the Ajax Pagination using Column Arranging module.

- Using PHP, get current data from the Database server and list them in an HTML table.

- By using Ajax Pagination module, add pagination hyperlinks to the information list table.

- Make the header columns of an HTML table accessible for information filtering.

- Enables the customers to paginate and arrange data without having to reload the page.

Take a look at the file structure before beginning to construct Ajax pagination with sorting by column in PHP.

ajax_pagination_with_search_filter/
├── dbConfig.php
├── index.php
├── getData.php
├── Pagination.class.php
├── js/
│   └── jquery.min.js
└── css/
    ├── bootstrap.min.css
    └── style.css

Create Database Table

To hold dynamic information in the database, a table is necessary. In the MySQL database, the following SQL creates a people database with some fundamental columns.

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
  `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `country` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive',
  `created` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Pagination Library

This customized PHP module aids in the development of pagination links through Ajax. To combine ajax pagination using column filtering in PHP, use the following configuration parameters.

- totalRows – The total number of rows.

- perPage — Keep track of the numbers that will be displayed on each page.

- currentPage – The page number that is currently in use.

- contentDiv – The ID of the HTML element in which the Ajax response information will be displayed.

- link func – The name of the function that performs the sort by column name function.

/** 
 * CodexWorld is a programming blog. Our mission is to provide the best online resources on programming and web development. 
 * 
 * This Pagination class helps to integrate ajax pagination in PHP. 
 * 
 * @class        Pagination 
 * @author        CodexWorld 
 * @link        http://www.codexworld.com 
 * @contact        http://www.codexworld.com/contact-us 
 * @version        1.0 
 */ 
class Pagination{ 
    var $baseURL        = ''; 
    var $totalRows      = ''; 
    var $perPage        = 10; 
    var $numLinks       =  3; 
    var $currentPage    =  0; 
    var $firstLink      = '‹ First'; 
    var $nextLink       = '>'; 
    var $prevLink       = '<'; 
    var $lastLink       = 'Last ›'; 
    var $fullTagOpen    = '

// Database configuration 
$dbHost     = "localhost"; 
$dbUsername = "root"; 
$dbPassword = "root"; 
$dbName     = "codexworld"; 
 
// Create database connection 
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 
 
// Check connection 
if ($db->connect_error) { 
    die("Connection failed: " . $db->connect_error); 
}

<link href="css/bootstrap.min.css" rel="stylesheet">

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

function columnSorting(page_num){
    page_num = page_num?page_num:0;
	
    let coltype='',colorder='',classAdd='',classRemove='';
    $( "th.sorting" ).each(function() {
        if($(this).attr('colorder') != ''){
            coltype = $(this).attr('coltype');
            colorder = $(this).attr('colorder');
			
            if(colorder == 'asc'){
                classAdd = 'asc';
                classRemove = 'desc';
            }else{
                classAdd = 'desc';
                classRemove = 'asc';
            }
        }
    });
    
    $.ajax({
        type: 'POST',
        url: 'getData.php',
        data:'page='+page_num+'&coltype='+coltype+'&colorder='+colorder,
        beforeSend: function () {
            $('.loading-overlay').show();
        },
        success: function (html) {
            $('#dataContainer').html(html);
            
            if(coltype != '' && colorder != ''){
                $( "th.sorting" ).each(function() {
                    if($(this).attr('coltype') == coltype){
                        $(this).attr("colorder", colorder);
                        $(this).removeClass(classRemove);
                        $(this).addClass(classAdd);
                    }
                });
            }
            
            $('.loading-overlay').fadeOut("slow");
        }
    });
}

$(function(){
    $(document).on("click", "th.sorting", function(){
        let current_colorder = $(this).attr('colorder');
        $('th.sorting').attr('colorder', '');
        $('th.sorting').removeClass('asc');
        $('th.sorting').removeClass('desc');
        if(current_colorder == 'asc'){
            $(this).attr("colorder", "desc");
            $(this).removeClass("asc");
            $(this).addClass("desc");
        }else{
            $(this).attr("colorder", "asc");
            $(this).removeClass("desc");
            $(this).addClass("asc");
        }
        columnSorting();
    });
});

<table class="sortable">
...
table>

<th scope="col" class="sorting" coltype="id" colorder="">IDth>

// Include pagination library file 
include_once 'Pagination.class.php'; 
 
// Include database configuration file 
require_once 'dbConfig.php'; 
 
// Set some useful configuration 
$limit = 5; 
 
// Count of all records 
$query   = $db->query("SELECT COUNT(*) as rowNum FROM users"); 
$result  = $query->fetch_assoc(); 
$rowCount= $result['rowNum']; 
 
// Initialize pagination class 
$pagConfig = array( 
    'totalRows' => $rowCount, 
    'perPage' => $limit, 
    'contentDiv' => 'dataContainer', 
    'link_func' => 'columnSorting' 
); 
$pagination =  new Pagination($pagConfig); 
 
// Fetch records based on the limit 
$query = $db->query("SELECT * FROM users ORDER BY id DESC LIMIT $limit"); 
 
?>

<div class="datalist-wrapper">
    
    <div class="loading-overlay"><div class="overlay-content">Loading...div>div>
    
    
    <div id="dataContainer">
        <table class="table table-striped sortable">
        <thead>
            <tr>
                <th scope="col" class="sorting" coltype="id" colorder="">#IDth>
                <th scope="col" class="sorting" coltype="first_name" colorder="">First Nameth>
                <th scope="col" class="sorting" coltype="last_name" colorder="">Last Nameth>
                <th scope="col" class="sorting" coltype="email" colorder="">Emailth>
                <th scope="col" class="sorting" coltype="country" colorder="">Countryth>
                <th scope="col">Statusth>
            tr>
        thead>
        <tbody>
            if($query->num_rows > 0){ 
                while($row = $query->fetch_assoc()){ 
            ?>
                <tr>
                    <th scope="row">echo $row["id"]; ?>th>
                    <td>echo $row["first_name"]; ?>td>
                    <td>echo $row["last_name"]; ?>td>
                    <td>echo $row["email"]; ?>td>
                    <td>echo $row["country"]; ?>td>
                    <td>echo ($row["status"] == 1)?'Active':'Inactive'; ?>td>
                tr>
            } 
            }else{ 
                echo '

No records found...';             }             ?> tbody> table> echo $pagination->createLinks(); ?> div> div>

Sort and Get Pagination Data (getData.php)

The Ajax request (called by the columnSorting() method) loads the getData.php code to obtain the paginated entries from the database.

- Retrieves data based on sort order, paging limit, and offset.
- Generate a data list that is sorted by column attribute value and includes pagination links.
- The HTML representation of the production database with column sorting is returned.

if(isset($_POST['page'])){ 
    // Include pagination library file 
    include_once 'Pagination.class.php'; 
     
    // Include database configuration file 
    require_once 'dbConfig.php'; 
     
    // Set some useful configuration 
    $offset = !empty($_POST['page'])?$_POST['page']:0; 
    $limit = 5; 
     
    // Set conditions for column sorting 
    $sortSQL = ''; 
    if(!empty($_POST['coltype']) && !empty($_POST['colorder'])){ 
        $coltype = $_POST['coltype']; 
        $colorder = $_POST['colorder']; 
        $sortSQL = " ORDER BY $coltype $colorder"; 
    } 
     
    // Count of all records 
    $query   = $db->query("SELECT COUNT(*) as rowNum FROM users"); 
    $result  = $query->fetch_assoc(); 
    $rowCount= $result['rowNum']; 
     
    // Initialize pagination class 
    $pagConfig = array( 
        'totalRows' => $rowCount, 
        'perPage' => $limit, 
        'currentPage' => $offset, 
        'contentDiv' => 'dataContainer', 
        'link_func' => 'columnSorting' 
    ); 
    $pagination =  new Pagination($pagConfig); 
 
    // Fetch records based on the offset and limit 
    $query = $db->query("SELECT * FROM users $sortSQL LIMIT $offset,$limit"); 
?>