Paginate records on Client side issue - php

Question

I am working on a search,filter operation using php,mysql.
My classes for pagination are
class Paginator{
var $items_per_page;
var $items_total;
var $current_page;
var $num_pages;
var $mid_range;
var $low;
var $limit;
var $return;
var $default_ipp;
//var $querystring;
var $ipp_array;
function Paginator()
{
$this->current_page = 1;
$this->mid_range = 2;
$this->ipp_array = array(2,4,6,8,10,'All');
$this->items_per_page = (!empty($_GET['ipp'])) ? $_GET['ipp']:$this->default_ipp;
}
function paginate()
{
if(!isset($this->default_ipp)) $this->default_ipp='2';
if($_GET['ipp'] == 'All')
{
$this->num_pages = 1;
//$this->items_per_page = $this->default_ipp;
}
else
{
if(!is_numeric($this->items_per_page) OR $this->items_per_page <= 0) $this->items_per_page = $this->default_ipp;
$this->num_pages = ceil($this->items_total/$this->items_per_page);
}
$this->current_page = (isset($_GET['page'])) ? (int) $_GET['page'] : 1 ; // must be numeric > 0
$prev_page = $this->current_page-1;
$next_page = $this->current_page+1;
if($_GET)
{
$args = explode("&",$_SERVER['QUERY_STRING']);
foreach($args as $arg)
{
$keyval = explode("=",$arg);
if($keyval[0] != "page" And $keyval[0] != "ipp") $this->querystring .= "&" . $arg;
}
}
if($_POST)
{
foreach($_POST as $key=>$val)
{
if($key != "page" And $key != "ipp") $this->querystring .= "&$key=$val";
}
}
if($this->num_pages > 4)
{
$this->return = ($this->current_page > 1 And $this->items_total >= 10) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$prev_page&ipp=$this->items_per_page$this->querystring\">« Previous</a> ":"<span class=\"inactive\" href=\"#\">« Previous</span> ";
$this->start_range = $this->current_page - floor($this->mid_range/2);
$this->end_range = $this->current_page + floor($this->mid_range/2);
if($this->start_range <= 0)
{
$this->end_range += abs($this->start_range)+1;
$this->start_range = 1;
}
if($this->end_range > $this->num_pages)
{
$this->start_range -= $this->end_range-$this->num_pages;
$this->end_range = $this->num_pages;
}
$this->range = range($this->start_range,$this->end_range);
for($i=1;$i<=$this->num_pages;$i++)
{
if($this->range[0] > 2 And $i == $this->range[0]) $this->return .= " ... ";
// loop through all pages. if first, last, or in range, display
if($i==1 Or $i==$this->num_pages Or in_array($i,$this->range))
{
$this->return .= ($i == $this->current_page And $_GET['page'] != 'All') ? "<a title=\"Go to page $i of $this->num_pages\" class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" title=\"Go to page $i of $this->num_pages\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page$this->querystring\">$i</a> ";
}
if($this->range[$this->mid_range-1] < $this->num_pages-1 And $i == $this->range[$this->mid_range-1]) $this->return .= " ... ";
}
$this->return .= (($this->current_page < $this->num_pages And $this->items_total >= 10) And ($_GET['page'] != 'All') And $this->current_page > 0) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$next_page&ipp=$this->items_per_page$this->querystring\">Next »</a>\n":"<span class=\"inactive\" href=\"#\">» Next</span>\n";
$this->return .= ($_GET['page'] == 'All') ? "<a class=\"current\" style=\"margin-left:10px\" href=\"#\">All</a> \n":"<a class=\"paginate\" style=\"margin-left:10px\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All$this->querystring\">All</a> \n";
}
else
{
for($i=1;$i<=$this->num_pages;$i++)
{
$this->return .= ($i == $this->current_page) ? "<a class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page$this->querystring\">$i</a> ";
}
$this->return .= "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All$this->querystring\">All</a> \n";
}
$this->low = ($this->current_page <= 0) ? 0:($this->current_page-1) * $this->items_per_page;
if($this->current_page <= 0) $this->items_per_page = 0;
$this->limit = ($_GET['ipp'] == 'All') ? "":" LIMIT $this->low,$this->items_per_page";
}
function display_items_per_page()
{
$items = '';
if(!isset($_GET[ipp])) $this->items_per_page = $this->default_ipp;
foreach($this->ipp_array as $ipp_opt) $items .= ($ipp_opt == $this->items_per_page) ? "<option selected value=\"$ipp_opt\">$ipp_opt</option>\n":"<option value=\"$ipp_opt\">$ipp_opt</option>\n";
return "<span class=\"paginate\">Items per page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page=1&ipp='+this[this.selectedIndex].value+'$this->querystring';return false\">$items</select>\n";
}
function display_jump_menu()
{
for($i=1;$i<=$this->num_pages;$i++)
{
$option .= ($i==$this->current_page) ? "<option value=\"$i\" selected>$i</option>\n":"<option value=\"$i\">$i</option>\n";
}
return "<span class=\"paginate\">Page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page='+this[this.selectedIndex].value+'&ipp=$this->items_per_page$this->querystring';return false\">$option</select>\n";
}
function display_pages()
{
return $this->return;
}
}
?>
I have performed a filter using check boxes like this:
<input type="checkbox" id="checkbox1" class="checkbox1" value="<?php echo $suburb['suburb_name']?>" name="Suburb_check[]" onClick="changeResults();" onChange="" ><?php echo $suburb['suburb_name']?> <span class="grey">(<?php echo $suburb['total']?>)</span>
Javascript/ajax code for filter
function changeResults(){
var data = { 'venue[]' : []};
$("input:checked").each(function() {
var chck1 = $(this).val();
//alert(chck1);
data['venue[]'].push($(this).val());
});
$.ajax({
type : 'POST',
url : 'process.php',
data : data,
success : function(data){
$('#project_section').html(data); // replace the contents coming from php file
}
});
}
process.php file
include_once("includes/classes/db_connect.php");
include_once("pagination/paginator.class.php");
$pages = new Paginator();
$value= array();
foreach($_POST as $key=>$value)
{
$value[] = $venue[$key][$value];
}
$countArray = count($value);
//echo $countArray;
/*echo "<pre>";
print_r($value);
echo "</pre>";
exit;*/
if($countArray=='2')
{
$where = "cities.city_name like '%".$_SESSION['$cityName']."%' and suburbs.suburb_name ='".$value[0]."' ";
}
else if($countArray=='3')
{
$where = "cities.city_name like '%".$_SESSION['$cityName']."%' and (suburbs.suburb_name ='".$value[0]."' or suburbs.suburb_name ='".$value[1]."')";
}
else if($countArray=='4')
{
$where = "cities.city_name like '%".$_SESSION['$cityName']."%' and (suburbs.suburb_name ='".$value[0]."' or suburbs.suburb_name ='".$value[1]."' or suburbs.suburb_name ='".$value[2]."')";
}
else if($countArray=='5')
{
$where = "cities.city_name like '%".$_SESSION['$cityName']."%' and (suburbs.suburb_name ='".$value[0]."' or suburbs.suburb_name ='".$value[1]."' or suburbs.suburb_name ='".$value[2]."' or suburbs.suburb_name ='".$value[3]."')";
}
else{
$where = "cities.city_name like '%".$_SESSION['$cityName']."%' " ;
}
$countSql="SELECT count(*) as total from properties inner join cities on properties.city_id=cities.city_id inner join suburbs on properties.suburb_id=suburbs.suburb_id where ".$where." ";
//echo $countSql;
$resultCount = mysql_query($countSql);
$data = mysql_fetch_row($resultCount);
$pages->items_total = $data[0];
$pages->mid_range = 2;
$pages->paginate();
echo $pages->display_pages();
echo $pages->display_items_per_page();
$sql="SELECT * from properties inner join cities on properties.city_id=cities.city_id inner join suburbs on properties.suburb_id=suburbs.suburb_id where ".$where." $pages->limit";
//echo $sql;
$result = mysql_query($sql);
//$data = mysql_fetch_assoc($result);
/*echo "<pre>" ;
print_r($data);
echo "</pre>" ; */
while($row=mysql_fetch_assoc($result))
{
?>
<div class="projectlisttiger" id="propertyList">
<div class="spacer5"> </div>
<div class="listnewimg flt">
<a href="p-kolte-patil-cilantro-wagholi-pune.php">
<img src="admin/uploads/<?php echo ($row['property_cover_image']) ?>" width="186" height="125" border="0">
<!--<img src="admin/uploads/Cilantra1/1cilantra-large.jpg" width="186" height="125" border="0">-->
</a>
<!--<div class="newlistlaunch"><img width="65" height="65" border="0" src="images/projects/kolte-patil/cilantra/new_launch_blue.png">
</div>-->
</div>
<div class="listright">
<div style="width:498px; height:42px;" class="flt">
<div class="list-logo flt">
<div class="buildborder"><img width="80" height="36" border="0" align="absmiddle" alt="Kolte Patil" src="admin/uploads/<?php echo $row['builder_logo']?>">
</div>
<div class="tablistname"><?php echo $row['property_name'] ?></div>
</div>
<?php if ($row['property_price_min']!=0) { ?>
<div class="listprice">
<img width="18" height="18" align="absmiddle" src="images/city/rupee_icon.gif"> <?php echo $row['property_price_min'] ?> Lacs - <?php echo $row['property_price_max'] ?> Lacs
</div>
<?php } else { ?>
<div class="listprice">
<img width="18" height="18" align="absmiddle" src="images/city/rupee_icon.gif">Price on Request
</div>
<?php } ?>
</div>
<div class="spacer3"> </div>
<div class="listbox">
<a href="p-kolte-patil-cilantro-wagholi-pune.php"><strong>Address</strong>:<?php echo $row['locality_name'] ?>, <?php echo $row['city_name'] ?><br> <strong>Types</strong>: 2BHK & 3BHK
<br><strong>Sizes:</strong> <?php echo $row['property_size_min'] ?> sqft - <?php echo $row['property_size_max'] ?> sqft </a>
</div>
<div style="margin-left:-3px;" class="flt">
<div style="width:110px;" class="flt"><a style="text-decoration:none;" href="p-kolte-patil-cilantro-wagholi-pune.php"><input type="button" value="View Details" class="detail_project"></a>
</div>
<div style="width:110px;" class="flt"><input type="button" onClick="showEnqForm('2659','Cilantro'); return false;" value="Enquire Now" class="enquire_project"></div>
</div>
<div class="spacer"> </div>
</div>
<div class="spacer15"> </div>
</div>
I return the paginated results back,but when I click on the page number it takes me to the process.php as the pagination class uses $_SERVER[PHP_SELF]
How can I paginate the results without changing the page url i.e using ajax for the same implementation. I can't make much changes and it would be useful if modifications in this makes it work.(That's why I have tred to add as much code as possible.) Sorry if its too much.
Thanks
EDIT
#Gavin Here is my process.php
<?php session_start();
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
include('processRegion.php');
die();
}
include_once("includes/classes/db_connect.php");
include_once("pagination/paginator.class.php");
$pages = new Paginator();
if(isset($_GET['dataString']))
{
$regionValue = $_GET['dataString'];
//echo "region=".$regionValue;
}
else{
$regionValue = $_POST['dataString'];
}
$reqValue = "'".$regionValue."'";
echo $reqValue;
$arr = explode(",",$reqValue);
//print_r($arr);
$getBack = implode("','",$arr);
$beds = "'".$_POST['beds'];
//echo ($beds);
$arrBeds= explode(",",$beds);
//print_r($arrBeds);
$getBedValue = implode("','",$arrBeds);
$finalBedValue = substr($getBedValue,0,-2);
if(isset($_POST['beds']) && $_POST['beds']!=" ")
{
$cityNameAndRegionName = "cities.city_name like '%".$_SESSION['$cityName']."%' and (suburbs.suburb_name in (".$getBack.")) and (properties_type.bed_type in (".$finalBedValue."))";
}
else
{
$cityNameAndRegionName = "cities.city_name like '%".$_SESSION['$cityName']."%' and (suburbs.suburb_name in (".$getBack."))";
}
$countSql="SELECT count(*) as total from properties inner join cities on properties.city_id=cities.city_id inner join suburbs on properties.suburb_id=suburbs.suburb_id left outer join properties_type on properties.property_id=properties_type.property_id where ".$cityNameAndRegionName." ";
?>
<?php include_once("processRegion.php"); ?>
processRegion.php with HTML
<div class="flt width710" id="">
<div style="float:right" id="toppagesel">
<?php
//Query processed here
?>
</div>
</div>
<div class="spacer15"> </div>
<div><strong>Results for properties for sale</strong> in <?php echo ucfirst($_SESSION['$cityName']) ?>.</div>
<div class="spacer15"> </div>
<div class="width710" id="displayProp">
<?php while($row=mysql_fetch_assoc($result))
{ ?>
<div class="projectlisttiger" id="propertyList">
<div class="spacer5"> </div>
<div class="listnewimg flt">
<a href="p-kolte-patil-cilantro-wagholi-pune.php">
<img src="admin/uploads/<?php echo ($row['property_cover_image']) ?>" width="186" height="125" border="0">
</div>
<div class="listright">
<div style="width:498px; height:42px;" class="flt">
<div class="list-logo flt">
<div class="buildborder"><img width="80" height="36" border="0" align="absmiddle" alt="Kolte Patil" src="admin/uploads/<?php echo $row['builder_logo']?>">
</div>
<div class="tablistname"><?php echo $row['property_name'] ?></div>
</div>
<?php if ($row['property_price_min']!=0) { ?>
<div class="listprice">
<img width="18" height="18" align="absmiddle" src="images/city/rupee_icon.gif"> <?php echo $row['property_price_min'] ?> Lacs - <?php echo $row['property_price_max'] ?> Lacs
</div>
<?php } else { ?>
<div class="listprice">
<img width="18" height="18" align="absmiddle" src="images/city/rupee_icon.gif">Price on Request
</div>
<?php } ?>
</div>
<div class="spacer3"> </div>
<div class="listbox">
<a href="p-kolte-patil-cilantro-wagholi-pune.php"><strong>Address</strong>:<?php echo $row['locality_name'] ?>, <?php echo $row['city_name'] ?><br> <strong>Types</strong>: 2BHK & 3BHK
<br><strong>Sizes:</strong> <?php echo $row['property_size_min'] ?> sqft - <?php echo $row['property_size_max'] ?> sqft </a>
</div>
<div style="margin-left:-3px;" class="flt">
<div style="width:110px;" class="flt"><a style="text-decoration:none;" href="p-kolte-patil-cilantro-wagholi-pune.php"><input type="button" value="View Details" class="detail_project"></a>
</div>
<div style="width:110px;" class="flt"><input type="button" onClick="showEnqForm('2659','Cilantro'); return false;" value="Enquire Now" class="enquire_project"></div>
</div>
<div class="spacer"> </div>
</div>
<div class="spacer15"> </div>
</div>
<?php
}
?>
<div class="spacer15"> </div>
</div>
<div style="float:right" id="toppagesel">
<?php
echo $pages->display_pages();
echo $pages->display_items_per_page();
?>
</div>

Answer 1

As stated in my comments.
You could do the following:
$(document).ready(function()
{
$('.paginate').live('click', function(e)
{
e.preventDefault();
var btnPage = $(this);
$.ajax(
{
url : btnPage.attr('href'),
success : function(resp)
{
// replace current results with new results.
$('#project_section').html(resp);
},
error : function()
{
window.location.href = btnPage.attr('href');
}
});
});
});
The above will replicate you clicking on each of the pagination links.
What I would advise to do next is to separate the PHP code and HTML that generates your "results" list into a separate file.
This way, on the page that displays the results, you can simply use include('path-to-results-file.php'); which will work for non-ajax requests and then you could do:
Process.php
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
include('path-to-results-file.php');
die();
}
The above would detect if an ajax request has been made and if so, instead of displaying the whole page including the results, it will simply display only the results and the pagination.
Updated to include a better explanation
Below is a VERY simple example of what I mean.
Current process.php
<?
// currently contains all of the code required
// to query the database etc.
?>
<html>
<head>...</head>
<body>
<!-- header content -->
<table>
<?
// currently contains all of the code required to display
// the results table and pagination links.
?>
</table>
<!-- footer content -->
</body>
</html>
New process.php
<?
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
include('path-to-results-file.php');
die();
}
?>
<html>
<head>...</head>
<body>
<!-- header content -->
<? include('path-to-results-file.php'); ?>
<!-- footer content -->
</body>
</html>
New path-to-results-file.php
<?
// currently contains all of the code required
// to query the database etc.
?>
<table>
<?
// currently contains all of the code required to display
// the results table and pagination links.
?>
</table>
Now... When you go to process.php normally via your browser, or when javascript is disabled. It will simply work the same way it does without Javascript now.
When you go to process.php and then click on one of the pagination links (with javascript enabled), process.php will detect that you are using Ajax and only send back the table of results.