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