直接上代码：
<!-- 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":"请求成功"
}
结果展示：