layui分成两列相同的表格_LayUI--表格 + 分页

记录每一个小坑、大坑

一般项目中表格加分页是必要的，看官方文档整理一个简单的例子

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. 结束

其它任何操作都可以基于这个例子开发

比如：头工具栏事件

就像拼积木，再加比如时间、事件、搜索等，都很方便

点个赞呗！