I want to get the article-loop divs to populate inside the echo function in the while loop. I'm trying to create a dynamic pagination that prints the article-loop divs dynamically per page. This is pretty straightforward so for example, when the user changes the page, I want the next few divs to display on that page and so on.
<?php
class Pagination {
public $current_page;
public $per_page;
public $total_count;
public function __construct($page=1, $per_page=20, $total_count=0) {
$this->current_page = (int)$page;
$this->per_page = (int)$per_page;
$this->total_count = (int)$total_count;
}
public function offset() {
return ($this->current_page - 1) * $this->per_page;
}
public function total_pages() {
return ceil($this->total_count/$this->per_page);
}
public function previous_page() {
return $this->current_page - 1;
}
public function next_page() {
return $this->current_page + 1;
}
public function has_previous_page() {
return $this->previous_page() >= 1 ? true : false;
}
public function has_next_page() {
return $this->next_page() <= $this->total_pages() ? true : false;
}
}
$page = !empty($_GET['page']) ? (int)$_GET['page'] : 1;
$per_page = 2;
$total_count = 10;
$pagination = new Pagination($page, $per_page, $total_count);
?>
<html>
<body>
<div class="article-loop">
<img src="http://i.imgur.com/CmU3tnl.jpg">
</div>
<div class="article-loop">
<img src="http://i.imgur.com/TDdxS9H.png">
</div>
<div class="article-loop">
<img src="http://i.imgur.com/39rpmwB.jpg">
</div>
<div class="article-loop">
<img src="http://i.imgur.com/1lBZQ1B.png">
</div>
<div class="article-loop">
<img src="https://i.imgur.com/Y5Ld4Qfh.jpg">
</div>
<div class="article-loop">
<img src="http://i.imgur.com/8HumESY.jpg">
</div>
<div class="article-loop">
<img src="http://i.imgur.com/CqCZBvk.png">
</div>
<div class="article-loop">
<img src="http://i.imgur.com/wQVPRVp.png">
</div>
<div>
<?php
$i = $pagination->offset() + 1;
$limit = $pagination->per_page;
while($i<=$pagination->total_count && $limit>0) {
echo '**IN HERE POPULATE THE ARTICLE-LOOP DIVS**';
$i++;
$limit--;
}
?>
</div>
<ul>
<?php
if($pagination->has_previous_page()) {
echo '<li style="display:inline">«</li>';
} else {
echo '<li style="display:inline" class="disabled">«</li>';
}
?>
<?php
for($i=1; $i<=$pagination->total_pages(); $i++) {
echo '<li style="display:inline; margin-left:5px; margin-right:5px">'.$i.'</li>';
}
?>
<?php
if($pagination->has_next_page()) {
echo '<li style="display:inline">»</li>';
} else {
echo '<li style="display:inline" class="disabled">»</li>';
}
?>
</ul>
</body>
</html>
Instead of
<?php
$i = $pagination->offset() + 1;
$limit = $pagination->per_page;
while($i<=$pagination->total_count && $limit>0) {
echo '**IN HERE POPULATE THE ARTICLE-LOOP DIVS**';
$i++;
$limit--;
}
?>
you can use something like
<?php
$i = $pagination->offset() + 1;
$limit = $pagination->per_page;
while($i<=$pagination->total_count && $limit>0) {
?>
**IN HERE POPULATE THE ARTICLE-LOOP DIVS** // html content
<?php
$i++;
$limit--;
}
?>
You should use second one. Many at times first one doesn't work properly.
Related
I have a function called getNews().
I call getNews() like this:
<div class="wrapper" id="blog">
<div class="blogPosts">
<?PHP getNews($postPerPage, 0, $theme_link, $pageNum); ?>
</div>
</div>
The function works until it tries to get the article text from wordpress using get_post_field().
function getNews($numPosts, $offset, $theme_link, $pageNum) {
$offset = $numPosts * $pageNum;
$recent_args = array('numberposts' => $numPosts, 'offset' => $offset,);
$articles = wp_get_recent_posts($recent_args);
foreach($articles as $article){
$article_id = $article['ID'];
...
echo $article_text = get_post_field('post_content', $article_id);
...
}
}
When I run this, I get the error saying Fatal error: Cannot redeclare getNews() (previously declared in /homepages/30/d545089862/htdocs/VintageTroubleMusic/wp-content/plugins/enhanced-text-widget/enhanced-text-widget.php(57)
For some reason, it's running my loop twice.
Any advice?
EDIT
I'm including the full code here: This is written inside of an "Enhanced Text widget" inside of a page.
<?PHP
$theme_link = "/wp-content/themes/thestory-child/";
$pageNum = $_GET['pa'];
$postPerPage = 27;
$qry_numPosts = mysql_query("SELECT * FROM Ykcfdlqhposts WHERE post_status = 'publish' AND post_type = 'post'") or die(mysql_error());
$numPosts = mysql_num_rows($qry_numPosts);
$numPages = ceil($numPosts/$postPerPage) . " pages";
if(!$pageNum){
$pageNum = 0;
}
?>
<!-- START OF THE BODY HERE -->
<h3 class="widget-title" style="float:left;">Headlines</h3>
<div class="wrapper" id="paginate1">
<?PHP paginate($numPosts, $numPages); ?>
</div>
<div class="wrapper" id="blog">
<div class="blogPosts">
<?PHP getNews($postPerPage, 0, $theme_link, $pageNum); ?>
</div>
</div>
<div class="wrapper" id="paginate2">
<?PHP paginate($numPosts, $numPages); ?>
</div>
And inside of the functions.php page
function getNews($numPosts, $offset, $theme_link, $pageNum) {
$offset = $numPosts * $pageNum;
$recent_args = array('numberposts' => $numPosts, 'offset' => $offset,);
$articles = wp_get_recent_posts($recent_args);
foreach($articles as $article){
$article_id = $article['ID'];
$article_link = get_permalink($article_id);
$article_length = 350;
$article_background = get_the_post_thumbnail($article_id);
$article_title = get_post_meta( $article_id, 'short_title', true );
$article_text = "test";
$article_text = get_post_field('post_content', $article_id);
//$article_text = get_post_field('post_content', $article_id);
//$article_text = strip_tags($article_text);
//$article_text_length = strlen($article_text);
/*
if($article_text_length >= $article_length) {
$article_text_pos = strpos($article_text, " ", $article_length);
$article_text = substr($article_text, 0, $article_text_pos)."... ";
}
*/
?>
<div class="article">
<?PHP //Get the article image
if (!$article_background) {
$rand = rand(1, 5);
$img = $theme_link . "images/img" . $rand . ".jpg";
} else {
$img = explode('src="', $article_background);
$img = explode(".jpg", $img[1]);
$img = $img[0] . ".jpg";
}?>
<a href="<?= $article_link; ?>">
<div class="article__image" style="background-image: url('<?= $img; ?>');"></div>
<div class="article__title"><?= $article_title; ?></div>
</a>
<div class="article__details">
<div class="article-text">
<?= $article_text; ?>
</div>
READ MORE
</div>
</div>
<? }
}
function paginate($numPosts, $numPages) {
?>
<div class="page">
<span>Page:</span><?PHP
$i = 0;
while($i < $numPages){
$i++;
if($i == $pageNum){
echo '<span style="background-color:transparent; text-decoration:underline; color:white; cursor:default;">'.$i.'</span>';
} else {
echo "<a href='?pa=".$i."'><span>".$i."</span></a>";
}
}
?>
</div>
<?
}
I tried to get the all the rows of a database and it should loop itself for expected output. The image of the output is [enter image description here][1]
And the code is as follows:
In model:
function get_menugroup()
{
$data=array();
$sql = $this->db->query("SELECT MenuName FROM MenuGroup;");
$menu_res = $sql->result();
if($sql -> num_rows() > 0 )
{
return $menu_res;
}
else{
echo "Nothing to process";
}
}`
In controller
public function menugroupname()
{
$menugroups=$this->UserRight_model->get_menugroup();
if ($menugroups){
$data['menu'] = $menugroups;
//$data['count'] = count($data['menu']);
$this->load->view('UserRight_view',$data);
}
}
In view:
<ul class="collapsible" data-collapsible="accordion">
<li>
<?php
if(is_array($menu)){
foreach($menu as $menus){
$menulist = $menus ->MenuName;
//$menulist = $menus['MenuName'];
$fun = explode(",",$menus ->MenuName);
}
$no_menu = count($menu);
//echo $no_menu;
for($i=0; $i<$no_menu ; $i++){
?>
<div class="collapsible-header"><i class="material-icons">place</i><?php echo $menulist ?></div>
<div class="collapsible-body"><p>Submenu.</p></div>
</li>
<?php }} else { echo "Wrong way";} ?>
</ul>
And thanks in advance
Try this.
<ul class="collapsible" data-collapsible="accordion">
<li>
<?php
if(($menu)){
foreach($menu[0] as $menus){
$menulist = $menus->MenuName;
$fun = explode(",",$menus ->MenuName); }
$no_menu = count($menu);
for($i=0; $i<$no_menu ; $i++){
?>
<div class="collapsible-header"><i class="material-icons">place</i><?php echo $menulist ?></div>
<div class="collapsible-body"><p>Submenu.</p></div>
</li>
<?php }} else { echo "Wrong way";} ?>
</ul>
Hope this helps you!
I have clients website that is getting overloaded with images in his gallery. I was wondering if I could get some advice and see what you guys/girls think would be the best way to handle this current situation I'm in.
http://www.richsdockcompany.com/Gallery.php
This gallery is created by php and mysql. I would like to set a limit to 12 images then it would switch to a different page(s), but it can't refresh the page or else the gallery will reset.
Current Code For Gallery
<?php
include_once "header.php";
include($_SERVER['DOCUMENT_ROOT'] . "/connections/dbconnect.php");
$images = mysql_query("SELECT * FROM images");
while ($image=mysql_fetch_assoc($images))
?>
<div id="Wrap">
<div class="Titles"><h2 style="font-size:36px;">Rich's Dock Company Image Gallery</h2></div><br />
<hr />
<div id="PhotoBoxWrap">
<!--======START GALLERY======-->
<div class="row">
<div class="column grid_12">
<div class="row">
<div class="column grid_12">
<!-- start Filter categories -->
<ul id="filter">
<li class="active">All</li>
<li>Dock Builders On Shore</li>
<li>Commercial Docks</li>
<li>Residential Docks</li>
<li>Dock Repairs & Additions</li>
<li>Barge Life</li>
</ul>
<!-- End Filter categories -->
</div>
</div>
<!-- Divider -->
<div class="row">
<div class="column grid_12">
<div class="clear"></div>
<div class="divider spacer5"></div>
</div>
</div>
<!-- End divider -->
<div class="row">
<ul id="stage" class="portfolio-4column">
<?php
$images = mysql_query("SELECT * FROM images ORDER BY id DESC");
while ($image=mysql_fetch_array($images))
{
?>
<li data-id="id-<?=$image["id"] ?>" data-type="<?=$image["data_type"] ?>">
<div class="column grid_3 gallerybox">
<a class="fancybox" rel="<?=$image["data_type"] ?>" href="images/gallery/<?=$image["file_name"] ?>" title="<?=$image["title"] ?>">
<img src="images/gallery/<?=$image["file_name"] ?>" alt="<?=$image["title"] ?>" class="max-img-border"></a>
<h4 style="color:#2B368D; text-align:center;"><?=$image["title"] ?></h4>
<p style="text-align:center; font-size:15px;"><?=$image["description"] ?></p>
</div>
</li>
<?php
}
?>
</ul><!--END LIST-->
The only thing I can think of off the top of my head would be to create a slider that would contain all the images or use ajax with pagination so there would be no refresh problem.
I have never attempted pagination so please go easy on me here.
Any advice would be appreciated.
Thanks!
look at this example code, which handles the pagination in a simple way.
You can reuse the function getPagesNavi for every list which should be paginated.
It returns the html with the links to navigate through the pages.
If you like to load the pages with ajax you need to do some modifications by yourself. This is only an example to show you how it could work.
$page = intval($_GET['page']);
$myurl = 'index.php?action=list';
$db->select("select * from tablename");
$count_total = $db->getRecords();
$items_per_page = 10;
$start = $page * $items_per_page;
$limit = "limit $start, $items_per_page";
$db->select("select * from tablename $limit");
while($row = $db->fetchArray()) {
// your output here...
}
echo getPageNavi($myurl,$page,$count_total,$items_per_page);
function getPagesNavi($link, $current_page, $count_total, $items_per_page, $number_of_visible_pagelinks_updown = 5, $page_varname = "page") {
$result = "";
if ($count_total <= 0) {
return "";
}
$pages_float = $count_total / $items_per_page;
$number_of_pages = ceil($pages_float) - 1;
$start = $current_page - $number_of_visible_pagelinks_updown;
$end = $current_page + $number_of_visible_pagelinks_updown;
if ($end > $number_of_pages) {
$dif = -$number_of_pages + $end;
$end = $number_of_pages;
$start = $start - $dif;
}
if ($start < 0) {
$dif = -$start;
$end = $end + $dif;
$start = 0;
}
if ($end > $number_of_pages) {
$end = $number_of_pages;
}
$back = $current_page - 1;
$forward = $current_page + 1;
if ($current_page > 0) {
$result .= "
<span class=\"pageItem\"><<</span>
<span class=\"pageItem\"><</span>";
} else {
$result .= "<span class=\"pageItem\"><<</span>";
$result .= "<span class=\"pageItem\"><</span>";
}
for ($i = floor($start); $i <= floor($end); $i++) {
$j = $i + 1;
$class = "";
if ($i == $current_page) {
$class = " currentPageItem";
}
$result.= "<span class=\"pageItem$class\">$j</span>";
}
if ($current_page != $number_of_pages) {
$result .= "<span class=\"pageItem\">></span>";
$result .= "<span class=\"pageItem\">>></span>";
} else {
$result .= "<span class=\"pageItem\">></span>";
$result .= "<span class=\"pageItem\">>></span>";
}
return $result;
}
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>
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.
Hey folks I am trying to implement a search functionality in a website using ajax,php,mysql,jquery.Now my application works fine when I go to a list page(Page with list of items on the site).But I have a search on the index page whose results have to be displayed on the list page.Basic pagination is done using php and works for the links coming from menu,but fails for search.(i.e if redirected from the index page using a search query it does not work)
The search text box:
<form name="homePageSearchForm" method="post" action="cities.php" autocomplete="off">
<!-- <input type="hidden" value="e.g kolte patil life republic, wagholi pune" id="hiddenExData" name="hiddenExData">-->
<div style="padding-top:5px; line-height:20px; width:280px;" class="flt">
<div class="flt"><strong>Locality, City, Builder or Project name</strong><span style="color:#FF3300;">*</span><br>
<div class="flt"><input type="text" onBlur="if(this.value=='') this.value='e.g kolte patil life republic, wagholi pune';" onFocus="if(this.value=='e.g kolte patil life republic, wagholi pune') this.value='';" value="e.g kolte patil life republic, wagholi pune" name="SearchValue" id="searchId" title="Search" class="headerinput ac_input" autocomplete="off">
List page div where content has to be displayed.
<div class="flt width710" id="displayProp">
<div style="margin-top:10px;" class="flt mapnewalert"> <?php //echo ucfirst($_SESSION['$city']) ?></div>
<div style="float:right" id="toppagesel">
<?php
echo $pages->display_pages();
echo $pages->display_items_per_page();
/* if(isset($localitySearch) && $localitySearch!='' && isset($citySearch) && $citySearch!='')
{
$query = "SELECT * from properties inner join cities on properties.city_id=cities.city_id inner join locality on properties.locality_id=locality.locality_id where (cities.city_name like '%".$citySearch."%' and locality.locality_name like '%".$localitySearch."%') and (property_price_min between '78 Lacs' and '80 Lacs') $pages->limit";
}*/
// else
// {
$query = "SELECT * from properties,locality,cities where properties.city_id='".$_SESSION['$cityId']."' and properties.locality_id=locality.locality_id and properties.city_id=cities.city_id $pages->limit";
// }
// echo $query;
$result = mysql_query($query) or die(mysql_error());
//$getProperty = $propertyDetails->getPropertyDetailsByCityIdPaginate($_SESSION['$cityId'],$limit);
?>
<?php //echo $pages->display_pages(); ?><?php //echo $pages->display_items_per_page();?>
</div>
</div>
Now on clicking the search button I call a javascript function as follows
<input type="submit" onClick="**handleHomePageSearch(0,'e')**;return false;" value="SEARCH" class="hpnewsubmitbtn">
The js function:
function handleHomePageSearch(buttonEle,e) {
var criteria = document.getElementById("searchCriteria").value;
var searchVal = document.getElementById("searchId").value;
xmlHttpSearchct=GetXmlHttpObject();
var cur_page = document.getElementById("current_page").innerHTML;
var url="fetchCity.php?&searchVal="+searchVal+"&buttonEle="+buttonEle+"&cur_page="+cur_page;
alert(url);
xmlHttpSearchct.open("GET",url,false);
xmlHttpSearchct.send(null);
var Searchres=xmlHttpSearchct.responseText;
**//To get the response**
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('displayProp').innerHTML=Searchres;
}
}
This gives the response back in the form of HTML but i am not able to display it on the list(properties.php) page.Also the pagination does not work if I go using the search values.
The fetchCity.php contans the query for the search and the HTML to return with data.
$searchValue= $_GET['searchVal'];
$buttonEle = $_GET['buttonEle'];
$current_page=$_GET['cur_page'];
$locCity = explode(" ",$searchValue);
$localitySearch = $locCity[0];
$citySearch = $locCity[1];
$query = "SELECT * from properties inner join cities on properties.city_id=cities.city_id inner join locality on properties.locality_id=locality.locality_id where (cities.city_name like '%".$citySearch."%' and locality.locality_name like '%".$localitySearch."%') and (property_price_min between '78 Lacs' and '80 Lacs') $pages->limit";
//echo $query;
exit;
$result = mysql_query($query) or die(mysql_error());
?>
<div class="width710" id="displayProp">
<?php
/*print_r($getProperty);
foreach($result as $property)*/
while($row=mysql_fetch_assoc($result))
{
?>
<div class="projectlisttiger">
<div class="proptigerhead">PropTiger Recommends</div>
<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> SPACER
<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> SPACER
</div>
<div class="spacer15"> </div> SPACER
</div>
<?php }
exit;
// echo "<p class=\"paginate\">Page: $pages->current_page of $pages->num_pages</p>\n";
?>
<div class="spacer15"> </div>
</div>
I would like to know is my approach right??How can I display the search results on the other page with pagination working.
For reference I will add the link of a reference site with similar functionality.
Here it is: http://www.proptiger.com/
Any kind of suggestions or help would be appreciated.
pagination class:
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='10';
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;
}
}
Thanks
$(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');
}
});
});
});
Here $(".paginate") is the class of the <li> in my paginator class. I got the answer here Thanks
Make your js funcion like this
function handleHomePageSearch(buttonEle, e) {
var criteria = document.getElementById("searchCriteria").value;
var searchVal = document.getElementById("searchId").value;
xmlHttpSearchct = new XMLHttpRequest();
var cur_page = document.getElementById("current_page").innerHTML;
var url = "fetchCity.php?&searchVal=" + searchVal + "&buttonEle=" + buttonEle + "&cur_page=" + cur_page;
alert(url);
xmlHttpSearchct.onreadystatechange = function () {
if (xmlHttpSearchct.readyState == 4 && xmlHttpSearchct.status == 200) {
document.getElementById('displayProp').innerHTML = xmlHttpSearchct.responseText;
}
}
xmlHttpSearchct.open("GET", url, false);
xmlHttpSearchct.send(null);
}