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實現跳轉
上面的代碼是直接可以用的,只需要改一下對象
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答