ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

PHP + jQuery 的分页

PHP + jQuery 的分页
一、前后端分页1.控制器示例:$news=Db::name('news')->where("type",$type)->paginate(4,false,['query'=>$this->request->param()]);$page=$news->render();//渲染$this->assign('news',$news);//赋值$this->assign('page',$page);//赋值2.页面渲染{$page}**注意点:**(1)带分类idpaginate(4,false,['query'=>$this->request->param()]);(2)不带分类idpaginate(4);二、PHP后端分页1.$page=0;$size=10;$pnum=ceil(count($results)/$size);$newArray=array_slice($results,($page-1)*$size,$size);2.$results=Db::name('test')->where($where)->page($page,6)->select();
html 部分<!DOCTYPEhtml><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><meta name="viewport"content="width=device-width, initial-scale=1"><title></title><script src="/assets/layui/layui.js"></script><script src="/assets/js/jquery.min.js"></script><link href="/assets/css/fSelect.css"rel="stylesheet"type="text/css"><script src="/assets/js/xm-select.js"></script><link href="/assets/layui/css/layui.css"rel="stylesheet"type="text/css"><style>.flex_box{display:flex;flex-wrap:wrap;width:1200px;margin:20px auto;}.box_item_label{position:relative;float:left;display:block;padding:9px15px;font-weight:400;line-height:20px;text-align:right;width:100px;}.flex_box_content{width:1600px;margin:20px auto;}.box_item_label{width:140px!important;}.layui-input-inline{margin-left:0px!important;margin-right:0!important;}.layui-form-mid{margin:017px!important;}#hrefs{display:none;}</style></head><body style="background-color: #FFFFFF;"><formclass="layui-form"action=""id="jiansuo"><divclass="flex_box"><divclass="layui-form-item"style="width: 450px;margin: 15px;"><labelclass="box_item_label"style="width: 140px;">日期:</label><divclass="layui-input-block"><input type="text"class="layui-input"id="riqi"placeholder="选择日期"style="width: 300px;"></div></div><divclass="layui-form-item"style="width: 450px;margin: 15px;"><labelclass="box_item_label"style="width: 140px;">姓名:</label><divclass="layui-input-block"><input type="text"class="layui-input"id="name"placeholder="填写姓名"style="width: 300px;"></div></div><divclass="layui-form-item"style="width: 450px;margin: 15px;"><labelclass="box_item_label"style="width: 140px;">颜色:</label><div id="yanse"style="margin-left: 140px;width: 300px;"></div></div><divclass="layui-form-item"style="width: 450px;margin: 15px;"><labelclass="box_item_label"style="width: 140px;">是否删除:</label><div style="margin-left: 140px;width: 300px;"><select multiple="multiple"id="isshanchu"><option value="">请选择是否删除</option><option value="1">否</option><option value="2">是</option></select></div></div><divclass="layui-form-item"style="width: 450px;margin: 15px;"><divclass="layui-inline"><labelclass="box_item_label"style="width: 105px;">个数:</label><divclass="layui-input-inline"style="width: 125px;margin-left: 35px;"><input type="number"id="geshu_min"placeholder=""class="layui-input"></div><divclass="layui-form-mid">-</div><divclass="layui-input-inline"style="width: 135px;"><input type="number"id="geshu_max"placeholder=""class="layui-input"></div></div></div><a id="hrefs"href=""class="btn btn-success btn-addtabs"title="{:__('详情页')}"><iclass="fa fa-plus"></i>{:__('详情页')}</a><divclass="layui-form-item"style="text-align: center;margin: 20px;"><divclass="layui-input-block"><button type="button"class="layui-btn"onclick="get_woekinfos()">搜索</button><button type="reset"class="layui-btn layui-btn-primary"onclick="jsreset()">重置</button></div></div></div></form><script>functionjsreset(){location.reload();}layui.use(['form','laydate','util'],function(){varform=layui.form;varlayer=layui.layer;varlaydate=layui.laydate;varutil=layui.util;// 日期laydate.render({elem:'#riqi',range:'~'});varoptions1={el:'#yanse',name:'xmselectName',//表单的name属性layVerify:'required',//必填项tips:'请选择颜色',toolbar:{show:true,list:['ALL','CLEAR','REVERSE'],}};vardemo1=xmSelect.render(options1)setTimeout(function(){//假设data是ajax 异步获取的vardata=[{name:'黑色',value:'black'},{name:'红色',value:'red'},{name:'白色',value:'white'}];//模拟通过ajax 获取json数据,异步更新多选下拉框的值demo1.update({data:data})},100);});functionget_woekinfos(){varriqi=$('#riqi').val();varname=$('#name').val();varyanse=xmSelect.get('#yanse',true).getValue('valueStr').split(',');varisshanchu=$('#isshanchu').val();vargeshu_min=$('#geshu_min').val();vargeshu_max=$('#geshu_max').val();if(geshu_min!=''&&shous_max!=''){if(geshu_min>geshu_max){layer.alert("填写不规范");return;}}if(yanse===null){varyanse='';}else{varyanse=yanse.toString();}if(isshanchu===null){varisshanchu='';}else{varisshanchu=isshanchu.toString();}varquery="/test/sousuo?";//这里为 打开页面的链接,即浏览器地址query+="riqi="+riqi+"&";query+="name="+name+"&";query+="yanse="+yanse+"&";query+="isshanchu="+isshanchu+"&";query+="geshu_min="+geshu_min+"&";query+="geshu_max="+geshu_max+"&";query+="addtabs=1"$('#hrefs').attr("href",query);// alert(query)window.location.href=query;return}</script></body></html>
接口publicfunctionsousuo(){$page=$this->request->get("page","1");$riqi=$this->request->get('riqi');$name=$this->request->get('name');$yanse=$this->request->get('yanse');$isshanchu=$this->request->get('isshanchu');$geshu_min=$this->request->get('geshu_min');$geshu_max=$this->request->get('geshu_max');$this->assign('riqi',$riqi);$this->assign('name',$name);$this->assign('yanse',$yanse);$this->assign('isshanchu',$isshanchu);$this->assign('geshu_min',$geshu_min);$this->assign('geshu_max',$geshu_max);$query="/admin/test/sousuo?";$query.="riqi=".$riqi."&";$query.="name=".$name."&";$query.="yanse=".$yanse."&";$query.="isshanchu=".$isshanchu."&";$query.="geshu_min=".$geshu_min."&";$query.="geshu_max=".$geshu_max;$this->assign('query',$query);$where0=[];$where0['is_dels']='0';$allcount=Db::name('test')->where($where0)->count();$list=Db::name('test')->where($where0)->order('id desc')->paginate(15,true);$result=[];foreach($listas$key=>$value){$value['no']=$key+1;$result[]=$value;}$data=array('allcount'=>$allcount,'list'=>$result);$this->assign('allcount',$allcount);$sum=ceil($allcount/15);$this->assign('sum',$sum);$endpage=0;if($page>$sum){$page=$sum;}if(($sum-$page)>5){$endpage=$page+5;}else{$endpage=$sum;}$this->view->assign("nowpage",$page);$this->view->assign("endpage",$endpage);$this->assign('data',$data);return$this->view->fetch();}
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进