I have wrote an article on pagination with a simple class and many users like it and download it so now i have decided to write its and updated version with AJAX. In this article i am going to explain you how to create pagination in PHP & MySQL with AJAX for your websites. Pagination is a very important part in your websites reporting and this article will help you to create it very very simple.

Also Read: How to create Advance Pagination in PHP & MySQL with jQuery

Database design and table:

database name => phpgang
table name => pagination
column names => id, post, postlink

db.sql

Database file run in your mysql to create database and add data in table.

create database `phpgang`;
use `phpgang`;
CREATE TABLE `pagination` (
  `id` int(11) NOT NULL auto_increment,
  `post` varchar(250) NOT NULL,
  `postlink` varchar(250) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=48 DEFAULT CHARSET=latin1 AUTO_INCREMENT=48 ;

INSERT INTO `pagination` VALUES (1, 'How to Resize text using jQuery', 'https://www.phpgang.com/?p=312');
INSERT INTO `pagination` VALUES (2, 'How to Integrate live search in PHP and MySQL with jQuery', 'https://www.phpgang.com/?p=309');
INSERT INTO `pagination` VALUES (3, 'How to implement jquery Timeago with php', 'https://www.phpgang.com/?p=290');
INSERT INTO `pagination` VALUES (4, 'How to Mask an input box in jQuery', 'https://www.phpgang.com/?p=304');
INSERT INTO `pagination` VALUES (5, 'How to block Inappropriate content with javascript validation', 'https://www.phpgang.com/?p=301');
INSERT INTO `pagination` VALUES (6, 'How to Crop Image with jQuery and PHP', 'https://www.phpgang.com/?p=298');
INSERT INTO `pagination` VALUES (7, 'How to Integrate jQuery Scroll Paging with PHP', 'https://www.phpgang.com/?p=294');
INSERT INTO `pagination` VALUES (8, 'Bug Reporting with Windows Program Steps Recorder (PSR)', 'https://www.phpgang.com/?p=291');
INSERT INTO `pagination` VALUES (9, 'How to Configure Google Cloud API in PHP', 'https://www.phpgang.com/?p=288');
INSERT INTO `pagination` VALUES (10, 'How to convert text to MP3 Voice', 'https://www.phpgang.com/?p=284');

db.php

Database configuration file edit database name, user and password as per your configuration.

<?php
    $connection = mysql_connect('localhost','phpgang','********') or die(mysql_error());
    $database = mysql_select_db('phpgang') or die(mysql_error());
?>

style.css

Use Css for style.

<style type="text/css">
ul.tsc_pagination { margin:4px 0; padding:0px; height:100%; overflow:hidden; font:12px \'Tahoma\'; list-style-type:none; }
ul.tsc_pagination li { float:left; margin:0px; padding:0px; margin-left:5px; }
ul.tsc_pagination li:first-child { margin-left:0px; }
ul.tsc_pagination li a { color:black; display:block; text-decoration:none; padding:7px 10px 7px 10px; }
ul.tsc_pagination li a img { border:none; }
ul.tsc_paginationC li a { color:#707070; background:#FFFFFF; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:solid 1px #DCDCDC; padding:6px 9px 6px 9px; }
ul.tsc_paginationC li { padding-bottom:1px; }
ul.tsc_paginationC li a:hover,
ul.tsc_paginationC li a.current { color:#FFFFFF; box-shadow:0px 1px #EDEDED; -moz-box-shadow:0px 1px #EDEDED; -webkit-box-shadow:0px 1px #EDEDED; }
ul.tsc_paginationC01 li a:hover,
ul.tsc_paginationC01 li a.current { color:#893A00; text-shadow:0px 1px #FFEF42; border-color:#FFA200; background:#FFC800; background:-moz-linear-gradient(top, #FFFFFF 1px, #FFEA01 1px, #FFC800); background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #FFFFFF), color-stop(0.02, #FFEA01), color-stop(1, #FFC800)); }
ul.tsc_paginationC li a.In-active {
   pointer-events: none;
   cursor: default;
}
</style>

function.php

Pagination Logic function Include in your file.

<?php
define('PAGE_PER_NO',8); // number of results per page.
function getPagination($count){
      $paginationCount= floor($count / PAGE_PER_NO);
      $paginationModCount= $count % PAGE_PER_NO;
      if(!empty($paginationModCount)){
               $paginationCount++;
      }
      return $paginationCount;
}
?>

index.php

Index file contain pages logic.

include_once('db.php');
include_once('function.php');
$query="select id from pagination order by id desc";
$res=mysql_query($query);
$count=mysql_num_rows($res);
if($count > 0){
      $paginationCount=getPagination($count);
}

$content ='<div id="pageData"></div>';
if($count > 0){

$content .='<ul class="tsc_pagination tsc_paginationC tsc_paginationC01">
    <li class="first link" id="first">
        <a  href="javascript:void(0)" onclick="changePagination(\'0\',\'first\')">F i r s t</a>
    </li>';
    for($i=0;$i<$paginationCount;$i++){

        $content .='<li id="'.$i.'_no" class="link">
          <a  href="javascript:void(0)" onclick="changePagination(\''.$i.'\',\''.$i.'_no\')">
              '.($i+1).'
          </a>
    </li>';
    }

    $content .='<li class="last link" id="last">
         <a href="javascript:void(0)" onclick="changePagination(\''.($paginationCount-1).'\',\'last\')">L a s t</a>
    </li>
    <li class="flash"></li>
</ul>';
}

AJAX Code

<script type="text/javascript">
function changePagination(pageId,liId){
     $(".flash").show();
     $(".flash").fadeIn(400).html
                ('Loading <img src="image/ajax-loading.gif" />');
     var dataString = 'pageId='+ pageId;
     $.ajax({
           type: "POST",
           url: "loadData.php",
           data: dataString,
           cache: false,
           success: function(result){
                 $(".flash").hide();
                 $(".link a").removeClass("In-active current") ;
                 $("#"+liId+" a").addClass( "In-active current" );
                 $("#pageData").html(result);
           }
      });
}
</script>

loadData.php

This file load data from database on auto load and onclick events.

<?php
include_once('db.php');
include_once('function.php');

if(isset($_POST['pageId']) && !empty($_POST['pageId'])){
   $id=$_POST['pageId'];
}else{
   $id='0';
}
$pageLimit=PAGE_PER_NO*$id;
$query="select post,postlink from pagination order by id desc
limit $pageLimit,".PAGE_PER_NO;
$res=mysql_query($query);
$count=mysql_num_rows($res);
$HTML='';
if($count > 0){
while($row=mysql_fetch_array($res)){
   $post=$row['post'];
   $link=$row['postlink'];
   $HTML.='<div>';
   $HTML.='<a href="'.$link.'" target="blank">'.$post.'</a>';
   $HTML.='</div><br/>';
}
}else{
    $HTML='No Data Found';
}
echo $HTML;
?>

Please Download the code and use this script feel free to comment if face any issue in it we love to reply on your comments. 🙂