本文主要介紹了jQuery中layer分頁器的使用,實例介紹了layer分頁器的技巧,非常具有實用價值,需要的朋友可以參考下,希望能幫助到大家。
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); } }); }); } }); });
layui.use(['laypage','layer'],function(){ var laypage = layui.laypage, layer = layui.layer; }
javascript - 新手在專案中模仿sg的分頁器. 求指點
以上是jQuery中layer分頁器實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!