多条件异步搜索+分页(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获取即可实现异步查询后的数据分页
多条件异步搜索+分页(PHP、 AJAX、ThinkPHP)的更多相关文章
- Yii 框架ajax搜索分页
要想实现ajax搜索分页 其实很简单 第一步:在 Yii 框架自带的搜索和分页正常运行的情况下,在视图层
- SSM框架——实现分页和搜索分页
登录|注册 在路上 在路上,要懂得积累:在路上,要学会放下:我在路上!Stay hungry,Stay foolish. 目录视图 摘要视图 订阅 [公告]博客系统优化升级 ...
- SAP UI 搜索分页技术
搜索分页技术往往和另一个术语Lazy Loading(懒加载)联系起来.今天由Jerry首先介绍S/4HANA,CRM Fiori和S4CRM应用里的UI搜索分页的实现原理.后半部分由SAP成都研究院 ...
- jquery zTree异步搜索的例子--搜全部节点
参考博客: https://segmentfault.com/a/1190000004657854 https://blog.csdn.net/houpengfei111/article/detail ...
- 02 - Unit08:搜索笔记功能、搜索分页、处理插入数据库乱码问题
搜索笔记功能 按键监听事件 $("#search_note").keydown(function(event){ var code=event.keyCode; if(code== ...
- Elasticsearch系列---搜索分页和deep paging问题
概要 本篇从介绍搜索分页为起点,简单阐述分页式数据搜索与原有集中式数据搜索思维方式的差异,就分页问题对deep paging问题的现象进行分析,最后介绍分页式系统top N的案例. 搜索分页语法 El ...
- SSM整合 mybatis多条件查询与分页
多条件查询与分页: 通过页面的houseName.floorage获取值传到前端视图(HouseSearchVO)实体类中的houseName,floorage建立houseSearchVO对象. 通 ...
- php搜索分页
最近做搜索分页的时候,发现第一页显示正常,点击到下一页的时候,显示结果变成了搜索全部内容. 仔细查看代码,发现当第一次输入关键词,提交到查询控制器的时候,表单提交的关键字不为空,可是点击到下一页的时候 ...
- Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...
随机推荐
- 通过TCP/IP连接Mysql数据库
问题:mysql只能用localhost或127.0.0.1连接 解决:mysql安装完后,默认是root用户,root用户只能在服务器登录,需要分配新用户. 1.以root用户登陆mysql数据库. ...
- nginx 设置http访问ftp目录内文件
设置 nginx “403 Forbidden” 错误的原因及解决办法 原文链接 https://www.cnblogs.com/chenzc/p/4461130.html nginx 的 403 F ...
- HTML创建文本框的3种方式
我的第一个随笔,记录主要用来整理学习的知识点 1.input 创建单行文本框 <input type="text" size="10" maxlength ...
- 深入理解javascript原型和闭包(3)——prototype原型 (转载)
深入理解javascript原型和闭包(3)——prototype原型 既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的 ...
- matplotlib系列——线的属性
幕布视图:https://mubu.com/doc/alG8r_3iSw 参考文献:嵩天的Python课程讲义 示例(更多示例:matplotlib系列——折线图) 效果 颜色 线的风格 标记类型 ...
- 51-python基础-python3-列表-常用列表方法- index()方法
index()方法 1-可以传入一个值,如果该值存在于列表中,就返回它的下标. 实例1: 2-如果该值不在列表中,Python 就报 ValueError. 实例2: 3-如果列表中存在重复的值,就返 ...
- nowcoder A hard problem /// 数位DP
题目大意: 称一个数x的各个数位之和为f(x) 求区间L R之间 有多少个数x%f(x)==0 #include <bits/stdc++.h> using namespace std; ...
- 选择 NoSQL 需要考虑的 10 个问题
那么我为什么要写这篇文章呢? 是因为我认为NoSQL解决方案不如RDBMS解决方案吗?当然不! 是因为我专注于SQL的做事方式,而不想陷入一种相对较新的技术的不确定性吗?不,也不是!事实上,我非常兴奋 ...
- Vue证明题
看来我需要对我的vue能力做一个证明了~~ 最近辞职了,又逢病重,找工作的时候发现对vue要求蛮高的,说会不行,还必须要有过vue的项目. 我这种半路出家的哪里来的vue的项目,公司又不是那种一线互联 ...
- go中加号的用法
// + 的用法 package main import "fmt" func main() { // 加号两端都是数字的话,做加法运算 var i = 1 var j = 1 v ...