• 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具有唯一性

    • 记得引入 jQuerylayUI相关 jscss

    • 使用

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


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

    点个赞呗!

  • 相关阅读:
    利用数组创建的顺序表实现各种功能
    poj3181 Dollar Dayz
    【网络协议】TCP的流量控制机制
    6.6.1 F# 中函数调用的类型判断
    oracle ORA-06550
    为基于 x86 的 Android* 游戏选择合适的引擎
    linux下apache https 虚拟主机配置
    Hibernate学习笔记(六) — Hibernate的二级缓存
    08_Android中的SimpleAdapter的使用
    【从零学习openCV】IOS7人脸识别实战
  • 原文地址:https://www.cnblogs.com/jry199506/p/11063985.html
Copyright © 2020-2023  润新知