LayUI--表格 + 分页

记录每一个小坑、大坑

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

0. 其它

---

• 链接：LayUI官网-table

• 链接：LayUI官网-laypage

• 上一篇：百度地图--点聚合 + 弹窗事件

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

---

其它任何操作都可以基于这个例子开发
比如：头工具栏事件
就像拼积木，再加比如时间、事件、搜索等，都很方便

点个赞呗！