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