jQuery中layer分页器的使用
layui给我们提供了分页器的组件,进行简单的配置就能做出分页的效果
上代码:
//点击查询按钮开始显示表格内容 //如果查询内容不存在则显示为空 $('#searchBtn').click(function(){ varhtml=''; $.ajax({ type:"GET", url:"data/tsResult.json", success:function(TS){ //拿到投诉案件数据 //分页器 layui.use(['laypage','layer'],function(){ varlaypage=layui.laypage, layer=layui.layer; varnum=7;//每一页出现的数据量 //模拟渲染 varrender=function(curr){//当前页 varhtml='', last=curr*num-1;//当前页的最后一行数据的下标 last=last>=TS.length?(TS.length-1):last; for(vari=(curr*num-num);i<=last;i++){ //从未显示的第一行开始 html+=''+ ' '; } returnhtml; }; laypage({ cont:'demo4', pages:Math.ceil(TS.length/num), first:false, last:false, jump:function(obj){ document.getElementById('TS-list').innerHTML=render(obj.curr); } }); }); } }); });'+TS[i].id+''+ ' '+TS[i].COMPNAME+''+ ' '+TS[i].COMTELPHONE+''+ ' '+TS[i].COMPCARD+''+ ' '+TS[i].DJRQ_S+''+ ' '+TS[i].COMTYPE+''+ ' '+TS[i].COMCONTEXT+''+ ' '+TS[i].STATE+''+ ' '+TS[i].btn+''+ '
稍微解释一下这边的代码:
1、点击按钮#searchBtn发起ajax请求获得需要分页的数据。
2、success成功后回调执行分页+拼接。
3、必须代码
layui.use(['laypage','layer'],function(){ varlaypage=layui.laypage, layer=layui.layer; }
4、定义一页需要显示的条数num,定义render方法,进行模拟渲染。
5、jump实现跳转
上面的代码是直接可以用的,只需要改一下对象
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。