springboot + layui + pageHepler 实现table 表格分页并且多行小计功能

日常表格统计中我们会用到总计的功能,这个功能layui帮我们已经实现了,

但有时候我们也需要在某个业务类型上,实现小计功能:

由于pageHepler的介入,导致我们没办法在数据传到前端的时候进行小计数据的插入,只能通过前端加载完数据后进行渲染,使用到的是table.render 中的done()方法。

具体实现代码:

javascript 复制代码
table.render({
            elem: '#schoolInfo-table',
            url: prefix + 'data',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#schoolInfo-toolbar',
            defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
            done: function(res,curr,count){
                console.log(res.data);
                var that = this.elem.next();
                var c1 = 0;
                var c2 = 0;
                res.data.forEach(function(item,index){
                    //寻找到当前行
                    var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                    console.log(item.teacherWxCode)//获取当前行的某一列的值,这里只是展示作用
                    console.log(tr);
                    

                    if((index+1)%2==0){
                        //要插入的小计数据的行信息
                        var newhtml = '<tr>' +
                            '<td></td>' +
                            '<td></td>' +
                            '<td></td>' +
                            '<td></td>' +
                            '<td></td>' +
                            '<td>小计:</td>' +
                            '<td></td>' +
                            '<td style="text-align: center">'+c1+'</td>' +
                            '<td style="text-align: center">'+c2+'</td>' +
                            '<td></td>' +
                            '<td></td>' +
                            '</tr>';
                         tr.after(newhtml);
                        c1 = 0;
                        c2 = 0;
                    }else{
                        c1++;
                        c2++;
                    }

                })
            }
        });
相关推荐
mldong11 小时前
C# 开发者也有自己的轻量工作流引擎了:NuGet 装包,5 分钟跑通一条审批流
后端·c#·.net
小小猪的春天13 小时前
Java 手写第一个 MCP Server:Spring AI MCP 半小时跑通
java·人工智能·spring boot·ai编程
爱学堂IT分享13 小时前
鹤翔老师pmp项目管理培训认证考试课 (直播录播题库送学时证明)【共58课时】-51CTO学堂
后端
王的宝库14 小时前
Go 项目结构:从单文件到标准工程布局
开发语言·后端·golang
码事漫谈15 小时前
类型即世界:一个 C++ 程序员的本体论入门
后端
Rain的Java大神之路15 小时前
JavaWeb开发如何解决跨域问题
java·前端·后端·nginx·web安全·面试·运维开发
计算机毕设定制辅导-无忧学长15 小时前
《基于SpringBoot青年公寓出租管理系统的设计与实现》
java·vue.js·spring boot·青年公寓出租管理系统
MetaLite17 小时前
AI编程与工程底座-让AI遵守SpringBoot边界
人工智能·spring boot·ai编程
IT_陈寒17 小时前
Python的多线程居然是个假把式?搞清GIL让我少熬三天夜
前端·人工智能·后端
明月_清风17 小时前
位图与布隆过滤器:海量数据下的"存在性判断"艺术
前端·后端·算法