Layui数据表格添加合计列totalRow，分页的每一页都显示总数

最新推荐文章于 2023-12-05 10:23:40 发布
原创 最新推荐文章于 2023-12-05 10:23:40 发布 · 5.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jsp #java

本文详细介绍如何在JSP中实现跨页数据总计，包括在jsp页面添加特定属性、后台编写总计统计SQL及确保合计数据字段与jsp字段匹配的方法。

我需要的效果如图：
在这里插入图片描述
1：首先在jsp添加相关属性
在这里插入图片描述
只是添加这些属性的话，计算出的合计是当前页的累加合计，不符合我的需求，我需要每页显示的都是所有数据的合计
2：在后台方法中，写一个合计统计的sql，返回的数据结构如图所示
在这里插入图片描述

3：需要注意的是，你的合计数据totalRow里面的字段名，需要和jsp中field中的字段名一样，否则，合计值还是显示不出来
以上步骤完成，合计值就可以显示出来了

【Layui】Layui Table 底部合计栏实现方案
德仔
09-03 236
本文介绍了Layui Table底部合计栏的实现方案。通过使用Layui Table组件，在表格渲染完成后计算数值列的总和，并将合计行插入到表格底部。方案实现了以下功能： 初始化表格时开启合计行功能 计算当前页数据的数值列总和 动态添加合计行到表格底部 监听分页和数据排序事件，重新计算合计值 代码示例展示了完整的实现过程，包括表格初始化、合计行计算、事件监听等关键步骤，适用于需要展示数据汇总统计的场景。
Layui 使用数据表格 Table 分页显示数据
李晋江的博客
04-13 3515
Layui 使用数据表格 Table 分页显示数据Layui 使用数据表格 Table 分页显示数据1.准备好一个合适的数据接口2.随便写一个测试 Demo3.解决问题4.优化显示以及功能补充5.效果演示5.源码地址 Layui 使用数据表格 Table 分页显示数据 1.准备好一个合适的数据接口 1.数据量还行 2.接口返回的数据最好满足 table 组件默认规定的数据格式 我这里用 Java...
【layui】layui.table表格实现底部固定两行合计行
XujiRe的博客
12-05 2681
layui表格layui.table表格实现底部固定两行（如：本页合计，全部合计）；layui表格渲染完成后进行样式修改实现底部固定两行
layui表格的编辑与合计
weixin_44546855的博客
07-17 2760
作者：HZY 在我们使用layui表格的时候，有时候需要修改表格中的数据，还有表格中的合计效果， 先来说一下修改表格中的数据，在阅读layui文档时会发现layui表格中有一个参数 edit, Edit：单元格编辑类型 ，目前只支持：text。 这个属性就是用来编辑表格中的数据的。 下面展示代码 { title: '商品名称', field: 'CommodityName', align: ...
layui.table 数组表格 把数据的总数显示出来
php菜鸟技术天地
02-22 1万+
, done: function(res, curr, count){ $("#total").html(count); } <blockquote class="layui-elem-quote"><h3>学生总人数：<span id='total'></span><
Layui数据表格显示数据总条数和数据求和
weixin_44545643的博客
05-28 1万+
把数据从layui数据表格中获取出来，其实非常简单只需要在layui数据表格里面加上一个done的属性就可以了，就可以拿到表格中的数据条数。 首先，done这个属性是自定义属性的意思，function中接收的参数是当前表格的参数，count是当前表格的总条数，如下数据表格中有74条数据。 控制台打印如下也是74条数据 这些数据中存在金额所以我们要统计出所有金额，如下：。 我们可以直接在layui数据表格里面加上totalRow就可以totalRow是合计的意思，如下： 就可以计算出当前页面数据的总
Layui 数据表格开启合计行
夏已微凉、
09-06 3059
一、使用方式二、使用代码三、效果截图 一、使用方式 1、在表格 [ 基础参数 ] 上增加：totalRow: true,，请参考文档 >>>数据表格基础参数一览表 2、在表格 [ 表头参数 cols ] 上增加：totalRow: true 或者 totalRow: '{{ d.TOTAL_NUMS }} 单位(分/秒/罐)' 或者 totalRow: '{{ parseInt(d.TOTAL_NUMS) }}' 请参考文档 >>>数据表格表头参数一览表 二、使用代.
layui 数据表格table合计配置跟合计行去掉小数点问题
caixuanji的博客
01-11 2639
layui 数据表格table合计配置跟合计行去掉小数点问题 表格设置 1.在表格的基本参数里设置 totalRow 2.在要显示“合计”两个字的列配置 3.在要统计的列里配置 完成代码案例 [ { field: 'id', title: 'id', align: 'center', fixed: "left"}, { field: 'name', title: '名称', align: 'center', totalRowText: '合计' //合计两个字在这一列的最下面 }
layui表格实现合计
刘学文的博客
09-16 1万+
今天遇到了新的需求，要在表格中加一栏合计，这可愁坏了我，别误会，不是太难，而是不知道用哪种方法...... 毕竟作为一个程序员，办法总比问题多，细细思索之后，我想到了三种方案： (ps：如果着急的小伙伴，请直接看plan C) plan A：后台进行统...
Layui中table数据分页显示
weixin_44547598的博客
06-17 4080
这是数据库中的表的数据 ，接下来在控制器中将数据查询并返回到页面上 这里我用了一个插件（layui），用到了layui里面内置模块（table）来进行接收 首先layui.table中有三种渲染方式 ，这里我就用最快捷的方法渲染 ，先准备一个装载数据的table表格 再到js中进行方法渲染 设置完url后 开始写控制器中的代码了 首先将数据查询出来 public ActionResu...
layui中table数据表格，把数据的总数显示在tab选项卡后面
li22356的博客
12-06 1497
问题如下： 获取表格的数据总数，显示在tab选项卡后面 效果图如下： 问题解决方法如下： 1. 首先定义一个span标签和id 如下图所示： <ul class="layui-tab-title"> <li class="layui-this">未读&nbsp;&nbsp;(<span id="total"></span>)</li> <li>全部</li> </ul> 2
layui.table之totalRow合计属性自定义数据解决方案
loveZyourself
12-31 2947
layui.table之totalRow合计属性自定义数据解决方案layui.table之totalRow合计属性自定义数据解决方案
Layui 表格显示数据
weixin_47282637的博客
09-08 3212
Layui 表格显示数据 让页面表格显示数据需要链接控制器 如图： 需要先声明一个方法 再用layui 里面 数据表格里的 reload 重载 方法 图中双引号里面的tabAcademe 是需要往里面加SQL里面数据的 用url 地址链接 后在控制器里 要连接数据库里的数据需要 使用 Models 就要先把Models实例化 如: 模型Models 里面的数据是从数据库SQL里面传过来的 SchoolMangeSystemEntites就是Models的name名称 通过这个名称 声明对象来接收 Mo
layui表格的,totalRow参数
hangchen1025的博客
04-25 8395
1.想要的效果 2.代码
layui 数据表格 每列的合计功能实现
qq_51110402的博客
08-30 3114
提示：这是layui 官方的 合计方式，网上也有其他的合计方式 ，这种合计对初学者来说很友好。
Layui数据表合计（totalRow）功能，模板（templet）情况下计算求和
热门推荐
qq_28512043的博客
09-23 2万+
方法一 table.render({ elem: ‘#demp’ ,url: ‘’ ,parseData: function(res){ //res 即为原始返回的数据 layui.each(res,function(i,d){ d.sum =d.unitPrice * d.amount;//sum 是自定义的属性 }) return res; },cols: [[ {field:‘sum’, t...
layui totalRow 多层嵌套json_文章推荐 | 基于JSON的自动化测试系统设计与实现
weixin_39527372的博客
10-22 167
中文摘要:针对飞机总装线地面人工综合测试效率低、周期长、一致性差等问题，提出了基于JSON数据交换技术的自动化测试系统。通过将复杂的测试工艺流程抽象封装为一系列测试动作，并按照一定的逻辑或时序构成测试流程；采用LabVIEW平台开发人机界面，通过人机界面加载测试流程驱动系统完成自动化测试，并生成测试报告；采用模块化设计，将测试流程与测试程序相互分离以降低系统耦合性，并具有扩展性好、灵活性...
layui table 获取分页当前每页总记录数
萌神30号 ↝
12-09 1834
前言 layui table 会自动封装table各种参数，但是当业务需要，需要获取当前每页总记录时 例子 done: function (res, curr, count) { var pageSize = eval('(' + $(".layui-laypage-limits").find("option:selected")[0].value + ')'); ...
layui合计功能
小叶
02-27 3066
今天就来给大家讲一下我在做项目中遇到的问题，项目中有这样一个效果，选中一些商品，然后的单价都加起来，显示所有选中的商品单价的累计消费。首先看一下它的代码，它是怎么使用的。如下图所示： 首先我们需要给他开启该列的自动合计功能，也就是说哪一列需要合计一些数据的就在那一列上面添加totalRow:true这个参数。前提是你必须在前面写一个开启自动合计功能的是参数totalRow:true。接下来就是totalRowText：””这个参数；你也可以不用写上totalRowText这个参数，可写可不写。它的功能就是
如何在layui table表格中对合计行的数据进行计算和显示？
最新发布
10-01
在layui table表格中对合计行的数据进行计算和显示，可按以下方法操作： ### 开启合计行 在表格基础参数中设置 `totalRow: true`，同时在表头参数 `cols` 里对需要计算合计的列设置 `totalRow: true` 或者使用特定表达式。示例代码如下： ```javascript table.render({ elem: '#demo', height: 420, url: '/demo/table/user/', // 数据接口 title: '用户表', page: false, // 开启分页 totalRow: true, // 开启合计行 cols: [ [ {field: 'id', title: 'ID', width: 80, fixed: 'left', totalRowText: '合计：'}, {field: 'classify', title: '爱好', width: 90}, {field: 'experience', title: '积分', width: 90, totalRow: true}, {field: 'experience', title: '重量', width: 190, totalRow: '{{ d.TOTAL_NUMS }} 千克'}, {field: 'score', title: '分数', width: 80, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 分'} ] ] }); ``` ### 自定义计算逻辑 若要使用自定义的计算逻辑，可在 `done` 回调函数中实现。在该回调函数里，对表格数据进行遍历和计算，然后将计算结果显示在合计行中。示例代码如下： ```javascript table.render({ elem: '#demo', url: '/your/data/url', totalRow: true, cols: [ [ {field: 'amount', title: '金额', totalRow: true} ] ], done: function (res, curr, count) { let totalAmount = 0; // 遍历数据计算合计 for (let i = 0; i < res.data.length; i++) { totalAmount += parseFloat(res.data[i].amount); } // 将计算结果显示在合计行 this.elem.next().find('.layui-table-total td[data-field="amount"] .layui-table-cell').text(totalAmount); } }); ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值