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

                })
            }
        });
相关推荐
行百里er4 小时前
Redis 完结篇——Redis 热点问题在 Spring Boot 项目中实战
redis·后端
高频因子挖掘机5 小时前
只取最近 60 个交易日,却每次拉全历史:量化脚本变慢的原因与改法
后端·github·api
孟健6 小时前
从5000亿Token到83%字节匹配:AI逆向工程与重构的工程闭环实践
后端·架构·ai编程
paopaokaka_luck6 小时前
滑雪场管理系统(AI智能助手流式对话,ECharts 运营数据分析、教练、雪具与场地一体化预约,钱包支付退款、订单核销与服务评价)
java·人工智能·spring boot·网络协议·数据分析·echarts
SL_staff6 小时前
JVS混合架构实践:能力引擎+动态模型如何支撑企业级可持续交付
spring boot·低代码·全栈
码事漫谈6 小时前
丢得静悄悄,谈一谈 Agent 的记忆是怎么没的
后端
迪飞特科技7 小时前
智慧物业平台实战:Spring Boot 整合小程序实现报修巡检费用全流程
spring boot·后端·小程序
考虑考虑7 小时前
@JsonInclude注解使用
spring boot·后端·spring
IT_陈寒7 小时前
Vite的这个问题坑了我三天,原来如此解决!
前端·人工智能·后端
网易云信7 小时前
大模型能上岗做销售吗?我们让 12 款国产模型交了 420 份作业
前端·后端