【Layui】使用table和laypage组件实现动态显示列和分页

 脚本内容

layui.use(['table', 'laypage'], function () {
            var table = layui.table;
            var laypage = layui.laypage;
            var page = 1;//页码全局变量
            var limit = 20;//分页大小全局变量
            table.render({
                elem: '#test'//容器ID
                , url: ''//数据获取接口地址
                , where: {
                    page: page
                }//接口参数，page为分页参数
                , height: 'full-85'
                , limit: limit //每页默认显示的数量
                , cols: []
                , id: 'testReload'
                , done: function (res, curr, count) {
                    //在完成接口调用后进行操作
                    var mycars;//列参数，用于在获取到数据后通过数据动态生成需要显示的列
                    //在这进行对mycars的处理
                    table.init('demo', {//转换成静态表格
                        cols: [mycars]//将处理后的mycars传入cols
                        , data: res.data//设置静态表格数据
                        , limit: 20//设置静态表格页面数据条数（分页大小）
                        , count: res.count//设置静态表格总数据条数
                    });
//在获取到表格数据后加载分页组件，点击分页时调用table的reload方法重新加载表格数据达到分页效果
                    laypage.render({
                        elem: 'laypage'//分页容器ID
                        , count: res.count//设置分页数据总数
                        , curr: page//当前页码
                        , limit: limit//分页大小
                        , layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
                        , jump: function (obj, first) {//跳转方法
                            if (!first) {//若不为第一页
                                page = obj.curr;//设置全局变量page 为当前选择页码
                                limit = obj.limit;//设置全局变量limit 为当前选择分页大小
                                table.reload('testReload', {//重新加载表格
                                    where: { //接口参数，page为分页参数
                                        page: page
                                    }
                                });
                            }
                        }
                    })
                }
            });

           
        });

HTML内容

<!--表格容器-->
<table class="ui-usertable" id="test" lay-filter="demo"></table>
<!--分页容器-->
            <div id="laypage"></div>