layui 树形表格分页功能

layui目前仅有常规表格分页及树形图，未能有树形图分页功能，

 采用另外单独设立分页栏，分页改变时调用方法重载树形树形表格数据。

20230628更

感谢各位的喜欢，因不经常登录，这里贴一下部分代码,以供参考。

后台部分为c# mvc

中心思路是将分页部分和树形图表格分开单独处理，分页数据改变时通过js重新获取树形表格。

前台页面部分

    <div class="layuimini-container">
        <div class="layuimini-main">
            @*<blockquote class="layui-elem-quote">
                    Layui的树形表格treeTable，支持异步加载(懒加载)、复选框联动、折叠状态记忆。<br>
                    <a href="https://gitee.com/whvse/treetable-lay" target="_blank" class="layui-btn layui-btn-danger">treetable-lay</a>
                </blockquote>*@
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">关键字</label>
                            <div class="layui-input-inline">
                                <input type="text" id="keyword" name="keyword" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" id="search" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
            <div>
                <div class="layui-btn-group">
                    <button class="layui-btn " id="btn-download">下载选中文件</button>
                    <button class="layui-btn " id="btn-fold">全部折叠</button>
                    <button class="layui-btn" id="btn-expand">全部展开</button>
                </div>
                <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
                <div id="laypages"></div>
            </div>
        </div>
    </div>

前台js部分

        pagefun(1, 15); // 使用 分页来显示
        function pagefun(page, limit) { 

        layui.config({
            base: rootPath + "lay-module/treetable-lay/",  // 配置模块所在的目录
        }).use(['table', 'treeTable', "form", 'laypage'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var form = layui.form;
            var treetable = layui.treeTable;
            var laypage = layui.laypage;


            //console.log(commonHeader);
            var size = $(".layui-laypage-limits").find("option:selected").val() //分页数目
            var page = $(".layui-laypage-em").next().html(); //当前页码值
            var keywords = $('#keyword').val(); //关键字

            if (typeof (size) == "undefined") {
                size=15
            }
            if (typeof (page) == "undefined") {
                page = 1
            }



            //计算出 分页数
            $.get("/Admin/xxxxx/GetmenuCount", { curr: page, limit: size, keywords: keywords }, function (result) {        

                laypage.render({
                    elem: 'laypages',
                    count: result.dataCount,//数据总数
                    curr: result.pageIndex,//当前页
                    limit: result.pageSize,
                    limits: [15, 20, 30, 40, 50, 60],
                    page: result.pageIndex,
                    layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
                    jump: function (obj, first) {
                        if (!first) {//如果不添加这个，会一直请求
                            pagefun(obj.curr, 15); //刷新页面
                        }
                    },
                });
            });


            // 渲染表格
            //layer.load(2);
            var insTb = treetable.render({
                id: 'aaa',
                isPidData: true,
                elem: '#munu-table',
                url: "/Admin/xxxx/TreeList?limit=" + size + "&curr=" + page + "&keywords=" + $('#keyword').val(),
                //headers: commonHeader,
                method: 'POST',
                page: true,
                cols: [
                    { type: 'checkbox', width: "8%", align: 'right' },
                   
                    { field: 'remark', width: "10%", align: 'left', title: '备注' },

                    { field: 'createDate', width: "12%", align: 'center', title: '文件上传时间' },
                    { templet: '#auth-state', width: "15%", align: 'center', title: '操作' }
                ],
                limits: [10, 20, 30, 40, 50, 100],
                limit: 15,
                page: true,
                done: function (res) {
                    layer.closeAll('loading');
                    console.log(res);
                }
            });


}

 后台部分

 获取页码部分

        /// <summary>
        /// 获取分页栏导航数据
        /// </summary>
        /// <param name="query"></param>
        /// <param name="curr"></param>
        /// <param name="limit"></param>
        /// <param name="keywords"></param>
        /// <returns></returns>
    [HttpGet]
        public JsonResult GetmenuCount(PageQueryModel query,int curr, int limit, string keywords)
        {
            if (limit==0)
            {
                limit = 15;
            }
            query.keyword = keywords;
 
            
//你的代码


                var obj = new
            {
                code = 200,
                msg = "ok",
                dataCount= dataCount,//数据总数
                pageCount = (dataCount / limit),//总页数
                pageIndex = curr,//当前页数
                pageSize = limit//每页大小
            };
            return Json(obj);
        }

获取树形图数据

        [HttpPost]        
        public async Task<IActionResult> TreeList(PageQueryModel query,int limit, int curr,string keywords)
        {
            Result<List<CompanyItem>> result = new Result<List<CompanyItem>>();
            PageModel<Company> pageModel = new PageModel<Company>();     
            List<CompanyItem> viweVoteItemList = new List<CompanyItem>();
            
//异常情况处理代码段
//仅供参考，请根据个人实际情况调整。
           
           
            pageModel.data = xxxxxx.ToList();//根据页码和关键词查询父级数据
            pageModel.data.ForEach(m =>
            {
                CompanyItem company = new CompanyItem()
                {
                    CompanyID = m.ID,                  
                };
                company.children = xxxxxx.ToList();//子级数据。
                viweVoteItemList.Add(company);
            });
            result.code = ResultCode.Success;
            result.msg = "成功";
            result.data = viweVoteItemList;
            return Json(result);
        }

因项目中摘抄下来，代码仅保留主体部分，仅供参考，如有问题请留言，我会看到后及时回复。