layui前端分页

直接上代码:

 <!-- html 引入layui.js和layui.css路径省略 -->
 <table id="fileRetrievalTable" class="layui-table" lay-filter="fileRetrievalTable"></table>
 <div id="pagediv"></div> 

// table 和 ajax 这里没有用到
 layui.use(['table', 'ax','laypage'], function () {
     var $ = layui.$;
     var table = layui.table;
     var $ax = layui.ax;
     var laypage = layui.laypage;
 ​
     var nums = 5; //每页出现的数据量
     var url = Feng.ctxPath + '/fileRetrieval/conditionSearch';
     $.get(url,function(d) {
         // 从后台获取json数据
         var d1 = d.data;
         var render2 = function (d1, curr){
             var arr = []
                ,thisData = d1.concat().splice(curr*nums-nums, nums);// 按照每页5条进行数据分组
             
             // 拼接表头
             arr.push("<thead>\n" +
                 "                   <tr align=\"center\">\n" +
                 "                       <th >文件名称</th>\n" +
                 "                       <th >文件类型</th>\n" +
                 "                       <th >文件主题</th>\n" +
                 "                       <th >文件大小</th>\n" +
                 "                       <th >文件位置</th>\n" +
                 "                       <th >文件标签</th>\n" +
                 "\n" +
                 "                   </tr>\n" +
                 "                   </thead>")
             
             // 循环拼接 tr td
             layui.each(thisData, function(index, item){
 ​
                 arr.push("<tr>\n" +
                     "                       <td>"+thisData[index].fileName+"</td>\n" +
                     "                       <td>"+thisData[index].fileType+"</td>\n" +
                     "                       <td>"+thisData[index].fileTheme+"</td>\n" +
                     "                       <td>"+thisData[index].fileLabel+"</td>\n" +
                     "                       <td>"+thisData[index].fileSize+"</td>\n" +
                     "                       <td>"+thisData[index].fileLocation+"</td>\n" +
                     "                   </tr>");
            });
             
             // 数组转字符串
             return arr.join('');
        }
 
         laypage.render({
             elem: 'pagediv'
            ,count: d1.length
            ,limit: 5
            ,limits: [5,10,15]
            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            ,jump: function(obj){
                 //$("#fileRetrievalTable").html = render2(d1, obj.curr);
                 document.getElementById('fileRetrievalTable').innerHTML = render2(d1, obj.curr)
            }
        });
    })
 });
 ​

 

 // var url = Feng.ctxPath + '/fileRetrieval/conditionSearch'; 的json结果
 ​
 {
 ​
     "code":0,
     "count":7,
     "data":[
        {
             "fileLabel":"标签1,标签2",
             "fileLocation":"",
             "fileName":"新建工作表.xls",
             "fileSize":"75KB",
             "fileTheme":"主题三",
             "fileType":"图片",
             "id":""
        },
        {
             "fileLabel":"测试123,啊是",
             "fileLocation":"C/ccc",
             "fileName":"都是",
             "fileSize":"0KB",
             "fileTheme":"主题三",
             "fileType":"视频",
             "id":""
        },
        {
             "fileLabel":"测试123,标签2",
             "fileLocation":"",
             "fileName":"fff",
             "fileSize":"0KB",
             "fileTheme":"主题三",
             "fileType":"PDF",
             "id":""
        },
        {
             "fileLabel":"测试123,标签2",
             "fileLocation":"",
             "fileName":"dffd",
             "fileSize":"0KB",
             "fileTheme":"主题三",
             "fileType":"图片",
             "id":""
        },
        {
             "fileLabel":"标签1,标签2",
             "fileLocation":"",
             "fileName":"新建工作表.xls",
             "fileSize":"75KB",
             "fileTheme":"主题三",
             "fileType":"图片",
             "id":""
        },
        {
             "fileLabel":"标签1,标签2",
             "fileLocation":"",
             "fileName":"新建工作表.xls",
             "fileSize":"75KB",
             "fileTheme":"主题三",
             "fileType":"图片",
             "id":""
        },
        {
             "fileLabel":"标签1,标签2",
             "fileLocation":"/AAA/新建工作表.xls",
             "fileName":"新建工作表.xls",
             "fileSize":"76KB",
             "fileTheme":"主题三",
             "fileType":"图片",
             "id":""
        }
    ],
     "msg":"请求成功"
 ​
 }
 ​

 

结果展示:

layui前端分页

 layui前端分页

上一篇:TP5.0实现Layui 局部刷新修改


下一篇:layui ajax删除