LayUI--表格 + 分页
记录每一个小坑、大坑
一般项目中表格加分页是必要的，看官方文档整理一个简单的例子
0. 其它
1. LayUI
LayUI是比较常用的框架，效果还是挺好的- 效果
2. 实例
- 在需要的地方添加表格容器
<table class="layui-hide" id="test" lay-filter="test"></table>
- 同时添加分页容器
<div id="demo1" style="float: right;margin-right: 10px;"></div>
-
两个容器节点的ID具有唯一性
-
记得引入
jQuery与layUI相关 js 、 css -
使用
GetList()
function GetList(STIME='2019-06-01 00:00:00',ETIME='2019-06-08 23:59:59',curr, cid, dat) {
var sizes = 19
// 获取服务器数据
$.ajax({
type: 'GET',
url: localStorage.baseUrl + `/Devicetsphis/GetDevicetsphisListByDeviceidTypeTime?TOKEN=${localStorage.token}`,
async: true,
data: {
STIME: STIME,
ETIME: ETIME,
page: curr || 1,
size:sizes
},
success: function (data) {
// 打印数据
console.log(data)
if (data.code === 0) {
let getdata = data.rows
// console.log(getdata)
// 引入表格与分页组件
layui.use(['laypage', 'table', 'layer'], function () {
var table = layui.table;
var laypage = layui.laypage
, layer = layui.layer;
// 表格组件
table.render({
elem: '#test' // 定位表格ID
, height: myheight-96 // 可自定义高度
, title: '用户数据表'
, cols: [[
// 根据获取的数据，填入 field
// sort 为排序功能
// 不定义宽度，则为自定义分配
{field: 'DEVICE_ID', title: '设备号', fixed: 'left', unresize: true, sort: true}
, {field: 'PKEY', title: '模式', edit: 'text', sort: true}
, {field: 'PVALUE', title: '数据', edit: 'text'}
, {field: 'INTIME', title: '更新时间', edit: 'text', sort: true}
, {field: 'BATCH_ID', title: '未知'}
, {field: 'ID', title: 'ID'}
]]
, data: getdata // 上面异步获取的数据，必填
,limit: sizes // 每一页自定义数据条数
, done : function () {
// 分页组件
laypage.render({
elem: 'demo1' // 根据ID定位
, count: data.totalcount // 获取的数据总数
,limit: sizes // 每页默认显示的数量，同上
, curr: curr || 1 // 页码
, jump: function (obj, first) {
// console.log(obj, first)
if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
GetList(STIME, ETIME, obj.curr, cid, dat); // 自调用
}
}
});
}
});
});
} else {
layui.use('layer', function () {
var layer = layui.layer;
layer.msg('获取信息出错!');
});
}
}
})
}
3. 异步获取的数据结构
- 数据结构
4. 结束
其它任何操作都可以基于这个例子开发
比如：头工具栏事件
就像拼积木，再加比如时间、事件、搜索等，都很方便
