使用 ajax php mysql 实现分页搜索
Posted
技术标签:
【中文标题】使用 ajax php mysql 实现分页搜索【英文标题】：Implementing a search with paging using ajax php mysql 【发布时间】：2012-06-08 06:35:32 【问题描述】：大家好，我正在尝试使用 ajax、php、mysql、jquery 在网站中实现搜索功能。现在，当我转到列表页面时，我的应用程序工作正常（包含网站上项目列表的页面)。但是我在索引页面上进行了搜索，其结果必须显示在列表页面上。基本分页是使用 php 完成的，适用于来自菜单的链接，但 搜索失败。（即如果使用搜索查询从索引页面重定向它不起作用）
搜索文本框：
<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">
列出必须显示内容的页面 div。
<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>
现在点击搜索按钮，我调用了一个 javascript 函数，如下所示
<input type="submit" onClick="**handleHomePageSearch(0,'e')**;return false;" value="SEARCH" class="hpnewsubmitbtn">
js函数：
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;
这会以 HTML 的形式返回响应，但我无法在列表（properties.php）页面上显示它。如果我使用搜索值，分页也不起作用。强>
fetchCity.php 包含用于搜索的查询和用于返回数据的 HTML。
$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']) ?>" border="0">
<img src="admin/uploads/Cilantra1/1cilantra-large.jpg" border="0">
</a>
<div class="newlistlaunch"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><img border="0" src="images/projects/kolte-patil/cilantra/new_launch_blue.png"></a>
</div>
</div>
<div class="listright">
<div style="width:498px; height:42px;" class="flt">
<div class="list-logo flt">
<div class="buildborder"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><img border="0" align="absmiddle" src="admin/uploads/<?php echo $row['builder_logo']?>"></a>
</div>
<div class="tablistname"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><?php echo $row['property_name'] ?></a></div>
</div>
<?php if ($row['property_price_min']!=0) ?>
<div class="listprice">
<img 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 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>
我想知道我的方法对吗？如何在分页工作的其他页面上显示搜索结果。
作为参考，我将添加具有类似功能的参考网站的链接。
这里是：http://www.proptiger.com/ 任何形式的建议或帮助将不胜感激。 分页类：
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;
谢谢
【问题讨论】：
告诉我什么是 $page 以及 display_pages() 在哪里 这些是分页功能。实际上没有添加它们，因为代码已经变大了！！我会为他们更新问题，请现在检查。 是我的答案中给定的功能不起作用 不，试过了，结果一样！！ 好吧，如果你遇到这样的麻烦，那么就赚取一些声誉分数并开始悬赏这个问题 【参考方案1】：$(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');
);
);
);
这里 $(".paginate") 是我的分页器类中 <li> 的类。我得到了答案here 谢谢
【讨论】：
【参考方案2】：让你的js函数像这样
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);
【讨论】：
我已经编辑了这个问题，那些是愚蠢的错别字，我在测试时弄乱了它们，但还没有结果。我真的很麻烦@Somebody。 我会尝试用简单的英语来表达。我添加的 Ajax 函数是导致我想的问题的原因。我想用列表（属性）页面上的 div 替换带有搜索结果的 div，我在 fetchCity.php 中。相同的 div 但只是内容会根据搜索而改变。所以我在 fetchCity 中的搜索查询的萤火虫中得到响应，但我无法用列表页面上的搜索结果替换 div。希望我很清楚！试过这样做document.getElementById('displayProp').innerHTML=Searchres; ，但我得到一个空白的div。以上是关于使用 ajax php mysql 实现分页搜索的主要内容，如果未能解决你的问题，请参考以下文章
（进阶篇）jQuery+Ajax+PHP+Mysql实现分页显示数据