我们做一个多条件筛选功能
原理就是sql参数拼接
思路：前端传递选择的数据到ajax，ajax传递给后端，后端返回数据，渲染界面
1、前端界面渲染选项
<dl class="xuan clearfix">
<dt>风格</dt>
<dd class="ddOn"> <a href="javascript:;" data-name="0">全部</a> </dd>
{volist name="casefg" id="vo"}
<dd><a href="javascript:;" data-name="{$vo.id}" >{$vo.id}{$vo.fgmc}</a></dd>
{/volist}
</dl>这里多个选项，自行输出，至少2个以上才叫多条件筛选
2、获取数据
<script type="text/javascript">
var lis=$('.xuan');
$(lis).find('a').click(function(){
$(this).parent().addClass('ddOn').siblings().removeClass('ddOn');
var fg,kj,hx,mj;
fg=$('.xuan').eq(0).find('.ddOn a').attr('data-name');
kj=$('.xuan').eq(1).find('.ddOn a').attr('data-name');
hx=$('.xuan').eq(2).find('.ddOn a').attr('data-name');
mj=$('.xuan').eq(3).find('.ddOn a').attr('data-name');
console.log("fg----"+fg)
console.log("kj----"+kj)
console.log("hx----"+hx)
console.log("mj----"+mj)
$.ajax({
method:"GET",
url:"{:url('index/cases/index')}",
data:"kj="+kj+"&hx="+hx+"&mj="+mj+"&fg="+fg,
success:function(info){
$('.case-anli').html($(info).find('.case-anli').html());
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
// 错误信息
console.log(textStatus);
}
});
return false;
});
<script>3、传递给后端
if(request()->isGet()){
// 默认获取全部
$kjid=input('get.kj/d') ? input('get.kj/d'):0;
$mjid=input('get.mj/d') ? input('get.mj/d'):0;
$hxid=input('get.hx/d') ? input('get.hx/d'):0;
$fgid=input('get.fg/d') ? input('get.fg/d'):0;
// 如果不点击 获取全部
if($kjid == 0 && $mjid == 0 && $hxid == 0 && $fgid == 0 ){
$caselst = Db::name('case')
->alias('c')
->join('fg f','c.fgid = f.id')
->join('hx h','c.hxid = h.id')
->join('team t','c.sjsid = t.id')
->field('c.id,c.img,c.title,c.zj,c.msg,c.fwmj,c.tj,f.fgmc,h.hxmc,t.title as tname,t.img as timg')
->order('c.sort asc')
->where('c.tj',1)
->paginate(2,false,['query' => request()->param()]);
}else{ //如果只选择了一部分数据
if($kjid == 0 || $mjid == 0 || $hxid == 0 || $fgid ==0){
if($kjid != 0){
$condition['kjid'] = $kjid;
}
if($mjid != 0){
$condition['mjid'] = $mjid;
}
if($hxid != 0){
$condition['hxid'] = $hxid;
}
if($fgid != 0){
$condition['fgid'] = $fgid;
}
$caselst = Db::name('case')
->alias('c')
->join('fg f','c.fgid = f.id')
->join('hx h','c.hxid = h.id')
->join('team t','c.sjsid = t.id')
->field('c.id,c.img,c.title,c.zj,c.msg,c.fwmj,c.tj,f.fgmc,h.hxmc,t.title as tname,t.img as timg')
->order('c.sort asc')
->where($condition)
->where('c.tj',1)
->paginate(1,false,['query' => request()->param()]);
}else{
$condition['kjid'] = $kjid;
$condition['mjid'] = $mjid;
$condition['hxid'] = $hxid;
$condition['fgid'] = $fgid;
$caselst = Db::name('case')
->alias('c')
->join('fg f','c.fgid = f.id')
->join('hx h','c.hxid = h.id')
->join('team t','c.sjsid = t.id')
->field('c.id,c.img,c.title,c.zj,c.msg,c.fwmj,c.tj,f.fgmc,h.hxmc,t.title as tname,t.img as timg')
->order('c.sort asc')
->where($condition)
->where('c.tj',1)
->paginate(1,false,['query' => request()->param()]);
}
}
$this->assign('caselst',$caselst);
}
return view();4、前端界面渲染
$('.case-anli').html($(info).find('.case-anli').html());注意 ： 这里这句代码包含输出 一定要注意 外层必须要包含一个标签。
这里我没包含一个外标签 弄了一天不知道原因。一定要注意。
<div class="team-anli case-anli ">
<div class="caselst clearfix">
{volist name="caselst" id ="vo"}
<a href="{:url('cases/shows',['id'=>$vo.id])}">
<div class="anli-img">
<img src="__UPLOADS__/{$vo.img}" alt="{$vo.title}">
<div class="case-up">
<img src="__INDEX__/images/caseup_03.png" alt="">
</div>
</div>
<div class="touxiang">
<img src="__UPLOADS__/team/{$vo.timg}" alt="本装饰案例设计：{$vo.tname}">
</div>
<h5>[{$vo.fgmc}] {$vo.title}</h5>
<p>设计师 — <span>{$vo.tname}</span></p>
<h6>
<i><img src="__INDEX__/images/qiaoh_03.png" alt=""><span>210</span></i>
</h6>
</a>
{/volist}
</div>
<div class="page">
{$caselst|raw}
</div>
</div>5、ajax分页：
$(document).on('click','.pagination li a',function(){
var pageObj = this;
var mIndex=$(this).index();
var get_url = pageObj.href;
$.ajax({
type:"GET",
url:get_url,
success:function(info){
$(".case-anli").html($(info).find('.case-anli').html());
}
});
return false;
})注意控制器代码中：
paginate(1,false,['query' => request()->param()]);
['query' => request()->param()],有多少个参数传递都会自动给你增加上
https://blog.csdn.net/haibo0668/article/details/78021550