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

                })
            }
        });
相关推荐
咚为7 小时前
Rust Print 终极指南:从底层原理到全场景实战
开发语言·后端·rust
二哈喇子!7 小时前
SpringBoot项目右上角选择ProjectNameApplication的配置
java·spring boot
二哈喇子!7 小时前
基于Spring Boot框架的车库停车管理系统的设计与实现
java·spring boot·后端·计算机毕业设计
二哈喇子!7 小时前
基于SpringBoot框架的水之森海底世界游玩系统
spring boot·旅游
二哈喇子!7 小时前
Java框架精品项目【用于个人学习】
java·spring boot·学习
二哈喇子!8 小时前
基于SpringBoot框架的网上购书系统的设计与实现
java·大数据·spring boot
二哈喇子!9 小时前
基于JavaSE的淘宝卖鞋后端管理系统的设计与实现
java·spring boot·spring
Coder_Boy_9 小时前
基于SpringAI的在线考试系统-智能考试系统-学习分析模块
java·开发语言·数据库·spring boot·ddd·tdd
高山上有一只小老虎10 小时前
mybatisplus实现分页查询
java·spring boot·mybatis
Loo国昌10 小时前
【LangChain1.0】第九阶段:文档处理工程 (LlamaIndex)
人工智能·后端·python·算法·langchain