记录每一个小坑、大坑
一般项目中表格加分页是必要的，看官方文档整理一个简单的例子
0. 其它
1. LayUI
LayUI是比较常用的框架，效果还是挺好的- 效果
2. 实例
- 在需要的地方添加表格容器
- 同时添加分页容器
- 两个容器节点的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. 结束
其它任何操作都可以基于这个例子开发
比如：头工具栏事件 就像拼积木，再加比如时间、事件、搜索等，都很方便
