You are here
Home > Web Development > AJAX Development > PHP Pagination with Ajax and MySQL

PHP Pagination with Ajax and MySQL

Hi PHP User, today I am going to tell you how to develop PHP pagination with MySQL and AJAX for your websites. PHP Pagination is a very important in every websites reporting and in this post i will help you to Develop PHP pagination.

First create a database and table

Database name => webtechtricks
Table name => pagination
Column names => id, post, postlink

Files that is used for pagination are


Your Code started here

db.sql – this code for Database file run in your mysql to create database and add data in table.

create database `webtechtricks`;
use `webtechtricks`;
CREATE TABLE `pagination` (
`id` int(11) NOT NULL auto_increment,
`post` varchar(250) NOT NULL,
`postlink` varchar(250) NOT NULL,
INSERT INTO `pagination` VALUES (1, ‘How to Resize text using jQuery’, ‘’);
INSERT INTO `pagination` VALUES (2, ‘How to Integrate live search in PHP and MySQL with jQuery’, ‘’);
INSERT INTO `pagination` VALUES (3, ‘How to implement jquery Timeago with php’, ‘’);
INSERT INTO `pagination` VALUES (4, ‘How to Mask an input box in jQuery’, ‘’);
INSERT INTO `pagination` VALUES (5, ‘How to block Inappropriate content with javascript validation’, ‘’);
INSERT INTO `pagination` VALUES (6, ‘How to Crop Image with jQuery and PHP’, ‘’);
INSERT INTO `pagination` VALUES (7, ‘How to Integrate jQuery Scroll Paging with PHP’, ‘’);
INSERT INTO `pagination` VALUES (8, ‘Bug Reporting with Windows Program Steps Recorder (PSR)’, ‘’);
INSERT INTO `pagination` VALUES (9, ‘How to Configure Google Cloud API in PHP’, ‘’);
INSERT INTO `pagination` VALUES (10, ‘How to convert text to MP3 Voice’, ‘’);

db.php –this code used for Database configuration file edit database name, user and password as per your configuration

$connection = mysql_connect(‘localhost’,’webtechtricks’,’********’) or die(mysql_error());
$database = mysql_select_db(‘webtechtricks’) or die(mysql_error());

style.css – this is code used for styling your page

<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;

function.php – this is code used for your pagination functions

define(‘PAGE_PER_NO’,8); // number of results per page.
function getPagination($count){
$paginationCount= floor($count / PAGE_PER_NO);
$paginationModCount= $count % PAGE_PER_NO;
return $paginationCount;

index.php – this is the code used for your index page

$query=”select id from pagination order by id desc”;
if($count > 0){
$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>
$content .='<li id=”‘.$i.’_no” class=”link”>
<a  href=”javascript:void(0)” onclick=”changePagination(\”.$i.’\’,\”.$i.’_no\’)”>
$content .='<li class=”last link” id=”last”>
<a href=”javascript:void(0)” onclick=”changePagination(\”.($paginationCount-1).’\’,\’last\’)”>L a s t</a>
<li class=”flash”></li>

AJAX Code – this is AJAX code for pagination

<script type=”text/javascript”>
function changePagination(pageId,liId){
(‘Loading <img src=”image/ajax-loading.gif” />’);
var dataString = ‘pageId=’+ pageId;
type: “POST”,
url: “loadData.php”,
data: dataString,
cache: false,
success: function(result){
$(“.link a”).removeClass(“In-active current”) ;
$(“#”+liId+” a”).addClass( “In-active current” );

loadData.php – code for load data from database on auto load and onclick events.

if(isset($_POST[‘pageId’]) && !empty($_POST[‘pageId’])){
$query=”select post,postlink from pagination order by id desc
limit $pageLimit,”.PAGE_PER_NO;
if($count > 0){
$HTML.='<a href=”‘.$link.'” target=”blank”>’.$post.'</a>’;
$HTML=’No Data Found’;
echo $HTML;


Leave a Reply