layui前端分页
时间:2021-08-23
本文章向大家介绍layui前端分页，主要包括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);