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++;
                    }

                })
            }
        });
相关推荐
㳺三才人子6 小时前
初探 Flask
后端·python·flask·html
星栈独行6 小时前
我在 Rust 全栈项目里用 JWT 做无状态认证
开发语言·后端·rust·前端框架·开源·github·web
Java爱好狂.6 小时前
Java程序员体系化学习路线(2026最新版)
java·后端·java面试·java架构师·java程序员·java八股文·java学习路线
陈随易7 小时前
Redis 8.8发布,一定要更新
前端·后端·程序员
装不满的克莱因瓶7 小时前
SpringBoot 如何将 lib 目录中jar包打包进最终的jar包里面
spring boot·后端·maven·jar·mvn
ltl8 小时前
Transformer 原论文实验结果:为什么 28.4 BLEU 足以改写路线图
后端
excel8 小时前
为什么我推荐使用 Termius:现代 SSH 工具的完整体验
前端·后端
卷毛的技术笔记9 小时前
Java后端硬核实战:用Spring AI Alibaba+Redis给LLM装上“超强记忆中枢”
java·人工智能·redis·后端·spring·ai·系统架构
IT_陈寒10 小时前
Java的Optional差点让我掉坑里,这几个坑你别踩
前端·人工智能·后端
子兮曰10 小时前
Harness 驾驭工程深度教程:从 AGENTS.md 到全链路 AI 编码基础设施
前端·后端·ai编程