Jquery Pagination in PHP

 

Demo Download

J Query

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
pagination('1')
});


function pagination(page_id)
{

var dataString = "page=" + page_id;
$.ajax({
type: "POST",
url: "pagination.php",
data: dataString,
success: function(response)
{
$("#display").show().html(response);

}
});
}

</script>

CSS

<style type="text/css">
body{font-family:"Trebuchet MS";width:440px;margin:0 auto;margin-top:100px;}
#display{border:1px solid #CCC;padding:10px;}
.catagory{width:100px;height:150px;float:left;}
.box{border-radius:12px;padding:5px;border:1px solid #CCC;background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
/* Paginate */
.paginate {padding: 3px;margin: 3px;text-align:center;}
.paginate a {padding:2px 5px 2px 5px;margin:2px;text-decoration:none;color:#FFF;background:#CCC;border: 1px solid #CCC;border-radius:3px;}
.paginate a:hover, .paginate a:active {border: 1px solid #999;color:#FFF;background:#790000;}
.paginate span.current {margin: 2px;padding: 2px 5px 2px 5px;font-weight: bold;background-color: #790000;color: #FFF;border-radius:3px;}
.paginate span.disabled {padding:2px 5px 2px 5px;margin:2px;color:#DDD;border: 1px solid #CCC;border-radius:3px;}

</style>

HTML

<div id="display" style="float:left;">
</div>

Page.php

<?php
error_reporting(0);

$conn = mysql_connect("localhost","root","");
mysql_select_db('demo',$conn);

if(isset($_POST['page']) && !empty($_POST['page']))
{
$tableName="category"; //page name
$limit = 4; //limit of dispaly

$query = "SELECT COUNT(*) as num FROM $tableName " or die(mysql_error()) ;
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages[num];

$stages = 3;
$page = mysql_escape_string($_POST['page']);
if($page){
$start = ($page - 1) * $limit;
}else{
$start = 0;
}

// Get page data

$sel = mysql_query("select * FROM $tableName LIMIT $start, $limit ") or die(mysql_error());
if(mysql_num_rows($sel)==""){echo '<br />
<p align="center">------------------- No Record Found -------------------</p><br />
';}

while($RowArray = mysql_fetch_array($sel))
{
$cat_img = $RowArray['cat_img'];
$ad_category= $RowArray['ad_category'];

?>
<div class="catagory">
<p align="center"><img src="adversite_services.png" width="60" height="60" class="box"><br>
<?php echo $ad_category ?></p>
</div>
<?php } ?>
<?php

// Initial page num setup
if ($page == 0){$page = 1;}
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$LastPagem1 = $lastpage - 1;


$paginate = '';
if($lastpage > 1)
{

$paginate .= "<div class='paginate'>";
// Previous
if ($page > 1){
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"$prev\");'>Previous</a>";
}else{
$paginate.= "<span class='disabled'>Previous</span>"; }


// Pages
if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"$counter\");'>$counter</a>";}
}
}
elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
{
// Beginning only hide later pages
if($page < 1 + ($stages * 2))
{
for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"$counter\");'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"$LastPagem1\");'>$LastPagem1</a>";
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"$lastpage\");'>$lastpage</a>";
}
// Middle hide some front and some back
elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
{
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"1\");'>1</a>";
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"2\");'>2</a>";
$paginate.= "...";
for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"$counter\");'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"$LastPagem1\");'>$LastPagem1</a>";
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"$lastpage\");'>$lastpage</a>";
}
// End only hide early pages
else
{
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"1\");' >1</a>";
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"2\");' >2</a>";
$paginate.= "...";
for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"$counter\");'>$counter</a>";}
}
}
}

// Next
if ($page < $counter - 1){
$paginate.= "<a href='javascript:void(0);' onclick='pagination(\"$next\");'>Next</a>";
}else{
$paginate.= "<span class='disabled'>Next</span>";
}

$paginate.= "</div>";


}
echo $paginate;
}
?>