Pagination with jQuery, PHP and MySQL.

Pagination is an important part of any website especially if you have hundreds of records. We can build pagination in PHP with the help of  Jquery library.

This tutorial contains four PHP and two JS files.
 First Create demo_pagination folder inside create those files.

database.php (Using DB Class)
config.php (Database configuration)
pagination.php
records.php

Open config.php in your IDE.

// These variables define the connection information for your MySQL database.Define Your Own setting 
    $username = "root"; 
    $password = ""; 
    $host = "localhost"; 
    $dbname = "DemoPagination"; 

Close config.php then We are creating Database in MYSQL.

CREATE DATABASE DemoPagination;

Inside "DemoPagination" Database Creating Table.

CREATE TABLE records
(
id INT PRIMARY KEY AUTO_INCREMENT,
msg TEXT
);

Inserting Few Rows in "records" table

INSERT into records 
 (msg)
values
('This is Testing record row 01. Just for Check'),
('This is Testing record row 02. Just for Check'),
('This is Testing record row 03. Just for Check'),
('This is Testing record row 04. Just for Check'),
('This is Testing record row 05. Just for Check'),
('This is Testing record row 06. Just for Check'),
('This is Testing record row 07. Just for Check'),
('This is Testing record row 08. Just for Check'),
('This is Testing record row 09. Just for Check'),
('This is Testing record row 10. Just for Check'),
('This is Testing record row 11. Just for Check'),
('This is Testing record row 12. Just for Check'),
('This is Testing record row 13. Just for Check'),
('This is Testing record row 14. Just for Check'),
('This is Testing record row 15. Just for Check'),
('This is Testing record row 16. Just for Check'),
('This is Testing record row 17. Just for Check');

Create a pagination.js file inside the folder and Paste this below code.

$(document).ready(function()
{
//Display Loading Image
function DisplayLoader()
{
$("#loader-div").fadeIn(800,0);
$("#loader-div").html("");
}
//Hide Loading Image
function HideLoader()
{
$("#loader-div").fadeOut('slow');
};

DisplayLoader();
$("#results").load("records.php?page=1", HideLoader());

//Pagination Click
$("#pagination li a").click(function(e){
 e.preventDefault(); 
 DisplayLoader();

//Loading Data
var page = this.id;
$("#results").load("records.php?page=" + page, HideLoader());
});

});

I'm using Database Class. You can also download from here. Then open the database.php file and copy whole code from download File.open config.php and include database.php.In records.php file first check $_GET['page'] is not empty then load records from Database.

 
<?php
require_once('config.php');

if($_GET['page']) {
 $record_per_page = 5;
 
 $page = $_GET['page'];
 $start = ($page - 1) * $record_per_page;
 
 $per_page = $start + $record_per_page;
 
 $db = new Mysqlidb ($host, $username, $password, $dbname);
 
 $results = $db->query("select * from records order by id limit $start,$record_per_page");
 
 foreach($results as $record) {
  $html = '';
  $html .= ''.$record['id'].'

';        
        $html .= ''.$record['msg'].'

';
  $html .= '';
  echo $html;
 }
}
?>

Open user interface file (pagination.php) and copy the code from below and paste it.

<?php
require_once('config.php');
//no of records shows  in page
$record_per_page = 5;
//create new instance DB Class
$db = new Mysqlidb ($host, $username, $password, $dbname);
//Runing Query
$db->query("select * from records");
//and count Total records
$count = $db->count;

$pages = ceil($count/$record_per_page);
?>








    


        
id
        
Message
        
      

 
 
    
 
  

 <?php 
  for ($i = 1; $i <= $pages; $i++) { 
   echo '
'.$i.'
'; 
  }
  ?>

Download Pagination Code from Here and Live Preview