多条件异步搜索+分页(PHP、 AJAX、ThinkPHP)

项目中遇到的多条件异步查询及数据分页问题，做了数次尝试，最终虽目的达到，但。。。。。希望能有更好的处理方式

基于 tp框架

1、html页面代码

<div class="h_cityName1">

　　<div class="h_cityName11">

<span>省</span>

<ul class="h_publicB" id="province_id" name="province_id" >

<volist name="list" id="vo">

<if condition="$areaId eq $vo.areaId">

<li value="{$vo.areaId}" onclick="sendData(this,‘province_id‘)"  >{$vo.areaName}</li>

<else />

<li value="{$vo.areaId}" onclick="sendData(this,‘province_id‘)"  >{$vo.areaName}</li>

</if>

</volist>

　　　</ul>

</div>

<div class="h_cityName11 h_cityList">

<span>市</span>

<ul class="h_publicB" id="city_id" name="city_id">

</ul>

</div>

　　　<div class="h_cityName11 h_areaList" >

<span>区</span>

<ul class="h_publicB" id="area_id" name="area_id">

</ul>

</div>

</div>

<div class="hangye"><b>行业</b></div>

　　<ul>

  <volist name="industry" id="industry">

   <li value="" onclick="sendData(this,‘industry‘)" name="{$idfrom_home}" ><span >{$industry.name}</span></li>    

   </volist>

　　 </ul>           

</div>

<div class="search3">

        <input type="text" name="" id="companyname" value=""  placeholder="搜索企业/商户名称"/>

         <a href="#"><input type="submit" class="but1"  id="s-by-c"  onclick="sendData(this,‘companyname‘)" value="" /></a>

</div>

<div class="zongmu-lbbu" id="companylist">

<volist name="company" id="vo">

　　 <div class="recommend-logo" >

      <div class="fl1">

<a href="{:U(‘Home/Company/detail?id=‘.$vo[‘id‘])}">

<img src="{$uploads}{$vo.logo}" class="fl-img"/>

<p>{$vo.name}</p>

<span class="span-add">{$vo.addreess}</span>

<img src="{$home_img}qiyezongmu_03.png" class="middle-img"/><span class="span-xx">{$vo.linkman}</span>

<img src="{$home_img}qiyezongmu2_06.png" class="middle-img"/><span class="span-xx">{$vo.linktel}</span>

<img src="{$home_img}qiyezongmu2_03.png" class="middle-img"/><span class="span-xx"> {$vo.qqnum}</span>

</a>

</div>

　　<div class="fl2">

<h3>公司主营</h3>

<p>{$vo.des}</p>

</div>

</div>

 </volist>

</div>       

 <div class="page" id="page">

<if condition="$arr[‘count‘] neq 0 ">

<span>共<b>{$arr.count}</b>条记录，{$arr.p}/{$arr.Page}页</span>

{$arr.show}

<else />

<center><b>暂无数据</b></center>

</if>

</div>

2、jquery & ajax

<script type="text/javascript">

/*

*区域(点击省获取区,点击区获取县)

*/

function sendData(data,type){

var data1=data.value;

var name=$(data).attr(‘name‘);

　　　var companyname=$("#companyname").val();

var data2 =$(data).parent().attr("id");

　　　var aa = $(data).text();

 $(data).addClass(‘selectPublicA‘).siblings().removeClass()

/*ajax post提交返回区域列表 */

$.ajax({ 

url:"{:U(‘Home/Company/ajaxarea‘)}",

data:{data:data1,type:type},

type:"post",

dataType:"json",

success:function(msg){

　　console.log(msg)

　　if(type == ‘province_id‘){

　　var html =‘‘;

　　$(‘#city_id‘).empty();

　　$(‘#area_id‘).empty();

　　for(var i=0;i<msg.length;i++){

　　html += "<li value=‘"+msg[i].areaId+"‘ onclick=‘sendData(this,\"city_id\")‘>"+msg[i].areaName+"</li>";

 　　}

　　$(html).appendTo($("#city_id"));

　　　　}else if(type == ‘city_id‘){

　　$("#area_id").parent().css("display","block");

　　var html =‘‘;

　　$(‘#area_id‘).empty();

　　for(var i=0;i<msg.length;i++){

　　html += "<li value=‘"+msg[i].areaId+"‘ onclick=‘sendData(this,\"area_id\")‘>"+msg[i].areaName+"</li>"

　　}

　　$(html).appendTo($("#area_id"));

　　　　}

　　}

})

$.ajax({

url:"{:U(‘Home/Company/index‘)}",

data:{data:data1,type:type,name:name,companyname:companyname},

type:"post",

dataType:"json",

success:function(msg){

console.log(msg)

var html="";

var company=msg.rows;

var url=msg.url;

$(‘#page‘).empty(); 

$("#companylist").empty();

if(company != null){

for(var i=0;i<company.length;i++){

html += "<div class=‘recommend-logo‘ >"

html += "<div class=‘fl1‘><a href=‘"+url[i]+"‘><img src=‘{$uploads}"+company[i].logo+"‘ class=‘fl-img‘/><p>"+company[i].name+"</p>"

html += "<span class=‘span-add‘>"+company[i].addreess+"</span>"

html += "<img src=‘{$home_img}qiyezongmu_03.png‘ class=‘middle-img‘/><span class=‘span-xx‘>"+company[i].linkman+"</span>"

html += "<img src=‘{$home_img}qiyezongmu2_06.png‘ class=‘middle-img‘/><span class=‘span-xx‘>"+company[i].linktel+"</span>"

html += "<img src=‘{$home_img}qiyezongmu2_03.png‘ class=‘middle-img‘/><span class=‘span-xx‘>"+company[i].qqnum+"</span></a></div>"

html += "<div class=‘fl2‘><h3>公司主营</h3><p>"+company[i].des+"</p></div></div>"

}

}

$(html).appendTo("#companylist");

var htmlpage="<span id=‘page‘>共<b>"+msg.count+"</b>条记录，"+msg.p+"/"+msg.Page+"页"+msg.show+"</span>";

$(htmlpage).appendTo($("#page"));

}

})

}

</script>

3、PHP 页面

public function index(){

$p = I(‘request.p‘);//获取点击分页的页数

$paging  = $p<1?1:$p;

　　　//==============================接收AJAX/GET传参===============//

$areaId=I(‘request.data‘);

$industryId=I(‘request.name‘);

$type=I(‘request.type‘);

$companyname=I(‘request.companyname‘);

　　　//==============================接收AJAX/GET传参===============//

　　　//==============================查询条件=====================//

$map = array(‘data‘ => $areaId,‘type‘=>$type,‘name‘=>$industryId,‘companyname‘=>$companyname);

$order=‘‘;

if(IS_AJAX){

if($areaId>0){//若点击省市区  该条件写入session

$_SESSION[‘areaId‘]=$areaId;

$_SESSION[‘type‘]=$type;

}

if($industryId >0){//若点击行业 该条件写入session

$_SESSION[‘industryId‘]=$industryId;

}

if($type == ‘industry‘){//若点击行业 调用session地区条件

$areaId=$_SESSION[‘areaId‘];

$type=$_SESSION[‘type‘];

}

if($type == ‘companyname‘){//若输入企业名查询 调用session 地区、行业条件

$areaId=$_SESSION[‘areaId‘];

$industryId=$_SESSION[‘industryId‘];

$type=$_SESSION[‘type‘];

}

$where= $this->get_where($areaId,$type,$industryId,$companyname);

}else{

//刷新页面时清除session中条件

$_SESSION[‘areaId‘]="";

$_SESSION[‘type‘]=‘‘;

$_SESSION[‘industryId‘]=‘‘;

$where = ‘ischeck = 1‘;

$where .=" AND ".$this->get_where($areaId,$type,$industryId,$goodsname);

}

　　　//==============================查询条件=====================//

　　　//==============================查询数据=====================//

　　　$list =  D(‘Areas‘,‘Api‘)->getareas(100,1,‘*‘,‘`parentId`=0‘);//所有地区列表

$industry = D(‘Industry‘,‘Api‘)->getindustry(1000,1,‘*‘,‘`status`=1 AND `isdelete`=1‘);//行业信息

　　　$arr=$this->getData_page(‘Company‘,3,‘*‘,$where,$order,$map);

　　　//==============================查询数据=====================//

$arr[‘p‘]=$paging;

$company=$arr[‘rows‘];

　　　if(IS_AJAX){

　　　　echo json_encode($arr);

　　　}else{

　　　　$this->assign(‘areaId‘,$areaId);

$this->assign(‘industryId‘,$industryId);

$this->assign(‘company‘,$company);

$this->assign(‘arr‘,$arr);

$this->assign(‘list‘,$list[‘tag‘]);

$this->assign(‘industry‘,$industry[‘tag‘]);//需求列表

$this->display();

　　　}

}

/*

* ajax区域联动

*/

public function ajaxarea(){

$data[‘parentId‘]=$_POST[‘data‘];

if($_POST[‘type‘] == ‘province_id‘){

$list =D(‘Areas‘)->getarea($data);

echo json_encode($list);

}else if($_POST[‘type‘] == ‘city_id‘){

$list =D(‘Areas‘)->getarea($data);

echo json_encode($list);

}

}

/**

*查询条件处理函数

*/

public function get_where($areaId=‘‘,$type=‘‘,$industryId=‘‘,$companyname=‘‘){

$where = "1=1";//初始化where变量

if ( $areaId > 0){

$where .=" AND {$type}={$areaId}";

}

if ($industryId >0){

$where .= " AND industry_id={$industryId}";

}

if (‘‘ != $companyname){

$where .=" AND `name` LIKE ‘%{$companyname}%‘";

}

return $where;

}

/**

*查询分页数据

*$model 模型名也可视为数据表名

*/

public function getData_page($model,$num=‘‘,$field=‘‘,$where=‘‘,$order =‘‘,$map=‘‘){

$Model =M($model);

$num  = ($num != ‘‘) ? $num : ‘10‘;

$field  = ($field != ‘‘) ? $field : ‘*‘;

if (!empty($field)){

$Model->field($field);

} else {

$Model->field(‘*‘);

}

if (!empty($where)){

$Model->where($where);

}

if (!empty($order)){

$Model->order($order);

}else{

unset($order);

}

$count =$Model->where($where)->count();

if (!empty($field)){

$Model->field($field);

} else {

$Model->field(‘*‘);

}

if (!empty($where)){

$Model->where($where);

}

if (!empty($order)){

$Model->order($order);

}

$Page = new \Think\Page($count,$num);

$Page->setConfig(‘prev‘,‘上一页‘);

$Page->setConfig(‘next‘,‘下一页‘);

$Page->setConfig("last",‘尾页‘);

$Page->setConfig(‘first‘,‘首页‘);

$Page->rollPage = ‘5‘;

　　　//TP分页方法 $show 中url 拼接条件参数  点击分页条 除了传P 也会传查询条件参数

foreach($map as $key=>$val) {

$Page->parameter[$key]   =   urlencode($val);

}

$show = $Page->show();

$offset = $Page->firstRow.‘,‘.$Page->listRows;

$Model->limit($offset);

$rows = $Model->select();

$pagetotal =ceil($Page->totalRows/$num);

$pagetotal<1 ? 1:$pagetotal;

$arr =array(‘count‘=>"$count",‘Page‘=>"$pagetotal",‘show‘=>"$show",‘rows‘=>$rows);

return $arr;

}

总结：ajax获取条件参数提交给 php，php分情况存SESSION,以保证下个条件查询时拥有之前的条件；分页部分利用tp自带分页查询，在此基础上 将ajax提交的参数拼接到每次点击分页后的URL 再通过get获取即可实现异步查询后的数据分页

时间： 2024-10-04 17:15:37

多条件异步搜索+分页(PHP、 AJAX、ThinkPHP)的相关文章

AJAX实现分页--模拟百度搜索分页

第一部分:效果与分析 1.百度分页组件: 2.自己实现的分页: 3.分析: 百度搜索分页,如果总页数大于10,用户最多只能看到10页内容,不足10页显示全部,当点击下一页时,数字页标向前移动一个单位,当点击上一页时向后移动一个单位. 第二部分:后台实现: 1.实现思路: 后台的处理思想是这样的,通过AJAX向后台发送请求,携带一个分页对象PageBean传过去,查询完毕后返回一个新的PageBean对象. 前台传入的PageBean对象参数: 属性 名称 是否必须 默认值 pageSize 每页

框架 day50 BOS项目 4 批量导入(ocupload插件,pinyin4J)/POI解析Excel/Combobox下拉框/分区组合条件分页查询(ajax)/分区数据导出(Excel)

知识点: 批量导入(ocupload插件,pinyin4J /POI解析Excel(apache POI) /区域分页查询 /Combobox下拉框 /分区组合条件分页查询(ajax) /分区数据导出(Excel下载) BOS项目笔记第4天 1.    区域批量导入功能 *Ajax不支持文件上传. *上传并且不刷新上传页面原理: Target到一个0,0,0的隐藏iframe里,造成一个没有刷新的假象 <form target="myIframe" action="ab

Ajax.BeginForm 异步搜索

视图页面的代码如下: <div id="ajax_search"> @using (Ajax.BeginForm( "Search",//Action "Test",//Controller new AjaxOptions { InsertionMode = InsertionMode.InsertAfter, HttpMethod = "GET", UpdateTargetId = "ajax_sear

SSM框架——实现分页和搜索分页

登录|注册     在路上 在路上,要懂得积累:在路上,要学会放下:我在路上!Stay hungry,Stay foolish. 目录视图 摘要视图 订阅 [公告]博客系统优化升级     [收藏]Html5 精品资源汇集     博乐招募开始啦 SSM框架——实现分页和搜索分页 标签: springMVC分页搜索分页mybatisssm 2014-05-21 11:09 5517人阅读 评论(9) 收藏 举报 分类: J2EE(9) 版权声明:本文为博主原创文章,欢迎转载,请注明地址. 目录(

SpringMVC分页和搜索分页

分页使我们经常需要使用的功能,昨天在Spring MVC中实现了简单的分页操作和搜索分页,在此记录一下.使用的框架为(MyBatis+SpringMVC+Spring). 首先我们需要一个分页的工具类: 1.分页 import java.io.Serializable; /** * 分页 */ public class Page implements Serializable { private static final long serialVersionUID = -319804844964

02 - Unit08：搜索笔记功能、搜索分页、处理插入数据库乱码问题

搜索笔记功能 按键监听事件 $("#search_note").keydown(function(event){ var code=event.keyCode; if(code==13){ 请求发送 } }) select * from cnshare cnshare_title like '%' 发送Ajax请求 事件绑定:键盘监听事件(keydown) 获取参数:keyword,作为模糊查询的基础 发送请求:/share/find.do 服务器处理 ShareController.

SAP UI 搜索分页技术

搜索分页技术往往和另一个术语Lazy Loading(懒加载)联系起来.今天由Jerry首先介绍S/4HANA,CRM Fiori和S4CRM应用里的UI搜索分页的实现原理.后半部分由SAP成都研究院菜园子小哥王聪向您介绍Twitter的懒加载实现. 关于王聪的背景介绍,您可以参考他的前一篇文章:SAP成都研究院非典型程序猿,菜园子小哥:当我用UI5诊断工具时我用些什么. S/4HANA Fiori应用搜索分页实现原理 以S/4HANA Product Master Fiori应用为例,如果什么

Entity Framework 多条件排序与分页的实现

项目过程中遇到需要对数据源进行多条件排序的情况, 开始觉得很简单,分分钟搞定,当时的逻辑大概是将排序条件以及是否倒序写入Dictionary中,在方法中遍历此Dictionary进行排序(下面的方法附带了分页,其实觉得耦合度太高,感觉还是都分开比较好) public IQueryable<T> GetListByPage<S>(int pageSize, int pageIndex, out int pageCount, Expression<Func<T, bool&

Springmvc+mybaits 分页处理+ajax翻页

Springmvc+mybaits (分页处理+ajax翻页) (2)/** * 显示微商城模板 */ @RequestMapping(value="/scmb",method = RequestMethod.GET) public ModelAndView showModel(ModelAndView mv, HttpServletRequest request,Integer p, Integer k) { if (p == null) { p = 0; } if (k == nu