layui表格和分页使用案例

问题描述：

layui是怎么通过js将数据渲染到表格的呢？还有表格分页又怎么实现呢?下面通过一个案例来说明是怎么使用的吧

 

使用：

通过js渲染将数据到表格

<!--引入相关js、css-->
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>

<!--布局-->
<div class="user-table">
    <!--表格-->
    <table class="layui-table" id="userTable" lay-filter="userTable"></table>
    <!--分页-->
    <div id="laypage" class="layui-laypage-btn"></div>
</div>


<!--userTable表头工具栏-->
<script type="text/html" id="toolbar">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn" lay-event="addNewUser">
            <i class="layui-icon">&#xe608;</i> 新增用户
        </button>
    </div>
    <div class="layui-btn-group">
        <button type="button" class="layui-btn" lay-event="batchDeleted">
            <i class="layui-icon">&#xe608;</i> 批量删除
        </button>
    </div>
</script>


<!--userTable操作工具栏-->
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!--js-->
<script>
    layui.use([ 'table','jquery','laypage'], function (){
    var $ =layui.jquery;
    var table=layui.table;
    var laypage=layui.laypage;
    var url = '/api/user';
    var searchParam={    //分页参数
            pageNum:1,
            pageSize:10
        }
    
    /*从后端获取数据，注意：获取到的数据字段需要和treetable中的cols字段相同*/
    $.ajax({
           url: url,
           data: JSON.stringify(searchParam),
           success: function(res){
                 laypageTable(res.totalRows,searchParam.pageNum);
              renderTable(res.data);
           }
    });

    /*初始化表格：treeIdName对应的是后端的id字段，treePidName对应的是后端的pid字段*/
    var renderTable = function(data) {
            // 渲染表格
            table.render({
                elem: '#userTable',
                cols: [
                        [
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'id', title: 'ID',  300, sort: true},
                        {field: 'username', title: '账号',  130},
                        {field: 'phone', title: '手机号',  130},
                        {field: 'sex', title: '性别',  100,                                         templet:function (item) {
                                if(item.sex === 1){
                                    return"男";
                                }
                                if (item.sex === 2){
                                    return"女";
                                }
                            }
                        },
                        
                        {field: 'status', title: '状态',  100,
                            templet: function (item) {
                                if(item.status === 1){
                                    return  '  <input type="checkbox" lay-                        skin="switch" lay-text="正常|禁用" checked disabled>';
                                }
                                if(item.status === 2){
                                    return  '  <input type="checkbox" lay-                        skin="switch" lay-text="正常|禁用" disabled>';
                                }
                            }
                        },
                        {300,title:'操作',toolbar:'#tool'}
                    ]
                ]
                ,data: data
                ,even: true
                ,limit: data.length
                ,limits: [10, 20, 30, 40, 50]
                ,toolbar: '#toolbar'
            });
        };
          
        /*渲染分页插件：count总记录数，currentPage当前页*/
        var laypageTable = function(count,currentPage) {
            laypage.render({
                elem: 'laypage',
                count: count,
                limit:searchParam.pageSize,
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh',                             'skip'],
                //获取起始页
                curr: location.hash.replace('#!currentPage=', '') ,
                //自定义hash值
                hash: 'currentPage' , 
                jump: function (obj,first) {
                    // first为false，则继续请求获取数据
                    if (!first){
                        searchParam.pageNum=obj.curr;
                        searchParam.pageSize=obj.limit;
                        $.ajax({
                              url: url,
                           data: JSON.stringify(searchParam),
                           success: function(res){
                              laypageTable(res.totalRows,searchParam.pageNum);
                              renderTable(res.data);
                           }
                        });
                    }
                }
            });
        };
        
        /*监听userTable表头工具栏点击事件: toolbar(userTable)*/
        table.on('toolbar(userTable)', function(obj){
            switch(obj.event){
                case 'addNewUser':
                    /* 新增用户相关操作 */
                    break;
                case 'batchDeleted':
                    /* 批量删除相关操作 */
                    break;
            };
        });
        
        /*监听userTable操作工具栏点击事件: tool(userTable)*/
        table.on('tool(userTable)',function (obj) {
            // obj.data可能相当于一个对象，有表格中某一行的数据
            // 比如：obj.data.id、obj.data.name
            var data = obj.data;
            switch (obj.event) {
                case 'edit':
                    /* 编辑用户相关操作 */
                    break;
                case 'del':
                    /* 删除用户相关操作 */
                    break;
            }
        });
    });
</script>