layui 数据表格示例

作者

原文链接：LayUI的基本使用 – 分页

数据表格

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>

<body>
    <table id="demo" lay-filter="test"></table>
    <script src="./layui/layui.js"></script>
    <script>
        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#tableData' // html 中 table 标签的 id
                , height: 'full-125'
                , toolbar: '#toolbar' // 工具节点
                , url: '/authority/list' // 获取表单数据接口
                , id: "tableReload"
                , response: { // 响应的数据的格式
                    statusName: 'code' //规定数据状态的字段名称，默认：code
                    , statusCode: '200' //规定成功的状态码，默认：0
                }
                , cols: [
                    [
                        //表头
                        {type: 'checkbox', width: 60},

                        // 数据列表
                        {field: 'id', title: 'id', width: 120, sort: true},
                        {field: 'parentId', title: '父级权限id', width: 120, sort: true},
                        {
                            field: 'authorityState',
                            title: '权限状态（0可用1不可用）',
                            width: 120,
                            sort: true,
                            templet: function (item) {
                                return item.authorityState == 0 ? "可用" : "不可用";
                            }
                        },
                        {field: 'row_number', title: '排序号', width: 120, sort: true},
                        {field: 'remark', title: '备注', width: 150},
                        {fixed: 'right', title: '编辑', toolbar: '#barDemo', width: 150},
                    ]
                ]
                //加分页功能
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    , curr: 1 //设定初始在第 1 页
                    , limit: 10 //一页显示多少条
                    , limits: [5, 10, 20, 50, 100]   //每页条数的选择项
                    , groups: 5 //只显示 5 个连续页码
                    , first: "首页" //首页按钮名称（页码超出最大数量则显示首页尾页）
                    , last: "尾页" //尾页按钮名称
                    , skin: true
                }
                //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                , parseData: function (res) {
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    } else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };
                }

            });
        });
    </script>
</body>

</html>

发表评论