**Index.php**
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- This is a pagination script using Jquery, Ajax and PHP
The enhancements done in this script pagination with first,last, previous, next buttons -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Pagination with Jquery, Ajax, PHP</title>
<link rel="stylesheet" href="pagingstyle.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script_div.js"></script>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<div style="margin-top:10px;">
<blockquote> </blockquote>
<!-- <iframe src="http://onlinewebapplication.com/ads.html" frameborder="0" scrolling="no" height="126px" width="100%"></iframe></div> -->
</div>
<div align="center" style="font-size:24px;color:#cc0000;font-weight:bold">Pagination with jquery, Ajax and PHP</div>
<select id="user">
<option value="-1">select..</option>
<option value="activate">activate</option>
<option value="deactivate">deactivate</option>
</select>
<div id="container" class="box">
<div class="data" class="box"></div>
<div class="pagination" class="box"></div>
</div>
<div id="container2">
<div class="data2"></div>
<div class="pagination2"></div>
</div>
<!--------------------------------------------------------------------------------------------->
<select id="car">
<option value="">select..</option>
<option value="white">white</option>
<option value="red">red</option>
<option value="black">black</option>
<option value="silver">silver</option>
</select>
<div id="container1" class="box1">
<div class="data1" class="box1"></div>
<div class="pagination1" class="box1"></div>
</div>
<div id="container3">
<div class="data3"></div>
<div class="pagination3"></div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------
**`userdata.php`**
<?php
error_reporting(E_ALL ^ E_NOTICE);
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 1;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include "config.php";
$query_pag_data = "SELECT * from users LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['name']);
$msg .= "<li><b>" . $row['id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM users";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
/*---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
$start_loop = $cur_page - 3;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page + 3;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 6;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 7)
$end_loop = 7;
else
$end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";
// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>first</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='inactive'>first</li>";
}
// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
$msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($cur_page == $i)
$msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
else
$msg .= "<li p='$i' class='active'>{$i}</li>";
}
// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
$msg .= "<li class='inactive'>Next</li>";
}
// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>"; // Content for pagination
echo $msg;
}
---------------------------------------------------------------------------------------
**`cardata.php`**
<?php
error_reporting(E_ALL ^ E_NOTICE);
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 1;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include "config.php";
$query_pag_data = "SELECT * from cars LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['car_name']);
$msg .= "<li><b>" . $row['id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data1'><ul>" . $msg . "</ul></div>"; // Content for Data
/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM cars";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
/*---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
$start_loop = $cur_page - 3;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page + 3;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 6;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 7)
$end_loop = 7;
else
$end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination1'><ul>";
// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>first</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='inactive'>first</li>";
}
// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
$msg .= "<li class='inactive'>Previous</li>";
}
for ($k = $start_loop; $k <= $end_loop; $k++) {
if ($cur_page == $k)
$msg .= "<li p='$k' style='color:#fff;background-color:#006699;' class='inactive'>{$k}</li>";
else
$msg .= "<li p='$k' class='active'>{$k}</li>";
}
// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
$msg .= "<li class='inactive'>Next</li>";
}
// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto1' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn1' class='go_button' value='Go'/>";
$total_string = "<span class='total1' a1='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>"; // Content for pagination
echo $msg;
}
-------------------------------------------------------------------------------
**`userstatus.php`**
<?php
error_reporting(E_ALL ^ E_NOTICE);
if($_POST['page'])
{
$q=$_POST['q'];
//echo "value:".$q;
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 1;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include "config.php";
$query_pag_data = "SELECT * from users where status='$q' LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['name']);
$msg .= "<li><b>" . $row['id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data2'><ul>" . $msg . "</ul></div>"; // Content for Data
/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM users where status='$q'";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
/*---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
$start_loop = $cur_page - 3;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page + 3;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 6;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 7)
$end_loop = 7;
else
$end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination2'><ul>";
// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='inactive'>First</li>";
}
// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
$msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($cur_page == $i)
$msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
else
$msg .= "<li p='$i' class='active'>{$i}</li>";
}
// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
$msg .= "<li class='inactive'>Next</li>";
}
// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto2' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn2' class='go_button' value='Go'/>";
$total_string = "<span class='total2' a2='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>"; // Content for pagination
echo $msg;
}
--------------------------------------------------------------------------------------
**`carcolor.php`**
<?php
error_reporting(E_ALL ^ E_NOTICE);
if($_POST['page'])
{
$q=$_POST['q'];
//echo "value:".$q;
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 1;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include "config.php";
$query_pag_data = "SELECT * from cars where color='$q' LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['car_name']);
$msg .= "<li><b>" . $row['id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data3'><ul>" . $msg . "</ul></div>"; // Content for Data
/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM cars where color='$q'";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
/*---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
$start_loop = $cur_page - 3;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page + 3;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 6;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 7)
$end_loop = 7;
else
$end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination3'><ul>";
// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='inactive'>First</li>";
}
// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
$msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($cur_page == $i)
$msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
else
$msg .= "<li p='$i' class='active'>{$i}</li>";
}
// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
$msg .= "<li class='inactive'>Next</li>";
}
// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto3' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn3' class='go_button' value='Go'/>";
$total_string = "<span class='total3' a3='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>"; // Content for pagination
echo $msg;
}
----------------------------------------------------------------------------------
config.php
<?php
$con=mysql_connect("localhost","root","") or die("error:".mysql_error());
$db=mysql_select_db("test2",$con);
?>
-------------------------------------------------------------------------------------
script_div.js
$(document).ready(function(){
function loadData(page){
$.ajax
({
type: "POST",
url: "userdata.php",
data: "page="+page,
success: function(msg)
{
//alert("I AM FIRST:"+msg);
$("#container").ajaxComplete(function(event, request, settings)
{
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
$('#user').change(function(){
var location = $(this).val();
/* don't do anything if blank option selected*/
if( location !=''){
$('.box').hide();
//$('#'+location).show();
}
else if(location=="-1")
{
$('.box').show();
}
});
});
//<!----------------------------------------------------------------------------------------->
//<!--user data with filtration-->
$(document).ready(function(){
$('#user').change(function(){
dis=$(this).val();
function loadData(page){
//alert(dis);
$.ajax
({
type: "POST",
url: "userstatus.php",
data: {page:page,
q:dis},
success: function(msg1)
{
//alert("I AM MESSAGE 1"+msg1);
$("#container2").ajaxComplete(function(event1, request1, settings1)
{
$("#container2").html(msg1);
});
}
});
}
loadData(1); // For first time page load default results
$('#container2 .pagination2 li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn2').live('click',function(){
var page = parseInt($('.goto2').val());
var no_of_pages = parseInt($('.total2').attr('a2'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto2').val("").focus();
return false;
}
});
});
});
//<!---------------------------------------------------------------------------------------------->
//<!--car data-->
$(document).ready(function(){
function loadData(page){
$.ajax
({
type: "POST",
url: "cardata.php",
data: "page="+page,
success: function(msg)
{
//alert("I AM FIRST:"+msg);
$("#container1").ajaxComplete(function(event, request, settings)
{
$("#container1").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container1 .pagination1 li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn1').live('click',function(){
var page = parseInt($('.goto1').val());
var no_of_pages = parseInt($('.total1').attr('a1'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto1').val("").focus();
return false;
}
});
$('#car').change(function(){
var location = $(this).val();
/* don't do anything if blank option selected*/
if( location !=''){
$('.box1').hide();
//$('#'+location).show();
}
});
});
//<!----------------------------------------------------------------------------------------->
//<!--car data with filtration-->
$(document).ready(function(){
$('#car').change(function(){
dis1=$(this).val();
function loadData(page){
$.ajax
({
type: "POST",
url: "carcolor.php",
data: {page:page,
q:dis1},
success: function(msg3)
{
//alert("I AM MESSAGE 1"+msg1);
$("#container3").ajaxComplete(function(event3, request3, settings3)
{
$("#container3").html(msg3);
});enter code here
}
});
}
loadData(1); // For first time page load default results
$('#container3 .pagination3 li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn3').live('click',function(){
var page = parseInt($('.goto3').val());
var no_of_pages = parseInt($('.total3').attr('a3'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto3').val("").focus();
return false;
}
});
});
});