使用JavaScript实现Bootstrap表格中列的总数量统计

JavaScript实现Bootstrap表格列总数量统计
于 2023-10-07 18:32:56 发布
阅读量505 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript bootstrap 开发语言 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CyberOI/article/details/133650947
js 专栏收录该内容
160 篇文章 ¥59.90 ¥99.00
订阅专栏
这篇博客介绍了如何使用JavaScript来实现Bootstrap表格中某一列的总数量统计。通过获取表格元素，遍历行，累加指定列的数值，最后在表格底部添加新行展示总和，提供了一个实现这一功能的详细步骤。

在Bootstrap表格中，有时我们需要对某一列的数值进行求和操作并显示总数量。通过JavaScript，我们可以轻松地实现这个功能。下面是一种实现方式：

HTML结构：

<table id="myTable" class="table table-bordered">
了解本专栏 订阅专栏 解锁全文
Bootstrap 一篇就够 快速入门&使用（中文文档）
m0_60786924的博客
05-02 3万+
目录 一、Bootstrap简介 什么是 Bootstrap？ 历史 为什么使用 Bootstrap？ Bootstrap 包的内容 在线实例 Bootstrap 实例 更多实例 Bootstrap 实例2 二、Bootstrap环境安装 下载 Bootstrap 文件结构 预编译的 Bootstrap Bootstrap 源代码 HTML 模板 实例 实例 实例 Staticfile CDN 推荐 三、关于Boostrap的中文文档 布局 Container..
Bootstrap-table分页+汇总统计
08-03
使用 Bootstrap-table表格进行分页，表格汇总统计，方便我们做报表
基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理...
weixin_34198453的博客
08-04 536
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处...
bootstrap table sum总数量统计实现方法
08-29
主要介绍了bootstrap table sum总数量统计实现方法,需要的朋友可以参考下
Bootstrap-table 表格计算列的和----总计
CapMiachael的博客
12-13 1万+
html中 <th data-field="purchaseQuantity" data-align="center" data-footer-formatter="sumQuantityFormatterModal" 注意 ：table要设置为 data-show-footer=”true” js中 /** * 采购数量总计(modal) * * @param data *
Bootstrap-表格模板（动态满屏）【筛选+分页+排序】
12-26
总的来说，这个Bootstrap表格模板项目综合运用了前端开发的多个技术点，包括Bootstrap的CSS和组件，jQuery的事件处理和DOM操作，以及可能涉及的第三方库如DataTables，来实现一个功能完善的动态表格。它对于开发者来...
Ruoyi框架/bootstrap-table 动态列+组合表头实现复杂统计表格
01-09 8171
Ruoyi框架/bootstrap-table 动态列+组合表头实现复杂统计表格
bootstrap table对每列数据进行统计汇总
fyj18186018296的博客
10-13 1万+
很多情况下需要对表格每一列的数据进行汇总,这个时候footerFormatter的用处就体现出来了。 代码： field: 'entrysalary',        title: '入职薪资',        sortable: true,        footerFormatter: function (value) {            var count = 0;
bootstrap获取总条目数
weixin_30892987的博客
06-14 467
$('#table').on('load-success.bs.table', function () {alert($('#table').bootstrapTable('getOptions').totalRows)}) 转载于:https://www.cnblogs.com/zhengqun/p/7007365.html
Bootstrap统计图后台管理模板
11-29
Bootstrap响应式销售统计后台管理模板
bootstrapTable获取总条数
qq_38410795冰淇淋的博客
12-19 6264
var num = $('#dataTable').bootstrapTable('getOptions').totalRows;
bootstrap table 实现底部合计
cocosum
09-02 4621
1、首先贴个效果图: 2、第二步来了，重点来了，开始吹水了。 // onLoadSuccess 应该都知道，是bootstrap table自己提供的 // 我想大家一看就明白, 加载成功之后。 // 就如下面的代码 onLoadSuccess:function(data){ var _count = 0; if (data.rows.length != 0)...
bootstraptable 汇总_bootstrap-table
weixin_42568714的博客
01-11 1358
在表格组件：bootstrap-table(一：基础使用) 中，介绍了 bootstrap-table的基础使用。但在实际应用中，更希望将bootstrap-table 封装，进行简单的配置即可。这样做的好处有：1)配置简单，调用方便。2)统一配置，后期维护方便。3)易于扩展一、创建 my_table 类接下来，我们首先建立 my_bootstrap_table.js ，并在其中定义 my_ta...
bootstraptable 汇总_bootstrap-Table 统计 求和 footerFormatter 分享
weixin_40005454的博客
12-28 2092
1.表格很好，有的时候需求和，然后bootstrap-table 默认是关闭 footer的，所以表格不显示footer也就是最后一行2.我们需要在表格初始化的时候打开footer选项 showFooter:truevar Controller = {index: function () {// 初始化表格参数配置Table.api.init({showFooter:true,extend: {i...
bootstrap-table统计列的值，实现表格统计？
热门推荐
我笔记
03-27 1万+
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ www.wobiji.net 我笔记 我尝试了使用Column options里footerFormatter这个属性，然而columns: [{ field: 'classNo', title: '编号' ...
bootstrapTable获取数据条数(获取总条数) 获取当前行(行号) 获取全部数据(本页) 获取某行数据 获取选中行数据
tanzongbiao的专栏
05-12 1万+
//bootstrapTable获取数据条数(获取总条数) var totalNum = $('#tb_TableStudent').bootstrapTable('getOptions').totalRows; alert(totalNum); //bootstrapTable获取当前行(行号) $('#tb_Table').on("click-row.bs.table",function(e, row, $element) { var index = $element.data('i..
Bootstrap Table数据表格的使用指南，springmvc面试题2020
m0_64383449的博客
12-23 1077
public Specification buildSpec(StudentForm form){ return null; } 其中page方法中接收参数的TablePageable类是接收分页和排序参数类，其中还包含了几个分页排序处理的方法。StudentForm中的字段和实体类中字段一样，主要用于接收查询条件。Student为实体类。buildSpec方法为查询方法。 TablePageable类代码如下。 import org.springframework.data.domain.PageRequ
如何在 Bootstrap Table 中实现跨列的单元格合并？
最新发布
07-15
### 实现跨列单元格合并的方法 在 Bootstrap Table 中，实现跨列单元格的合并主要依赖于插件提供的 `mergeCells` 方法。该方法允许开发者根据特定的数据逻辑对表格中的单元格进行横向或纵向合并操作。具体调用方式如下： ```javascript $(target).bootstrapTable('mergeCells', { index: index, field: '字段名', colspan: 合并的列总数目, rowspan: 合并的行总数目 }); ``` 其中： - `index` 表示所要合并的单元格所在行的索引； - `field` 表示所要合并的列字段名； - `colspan` 表示需要合并的列数； - `rowspan` 表示需要合并的行数。 此方法适用于静态数据场景下的单元格合并需求 [^1]。 --- ### 动态计算并自动合并多个行或列的单元格 对于动态数据场景，例如需要根据相同内容的字段值自动合并单元格的情况，可以先对数据进行预处理。核心思路是通过遍历数据集，计算出需要合并的起始位置以及合并的行列范围，再调用 `mergeCells` 方法完成实际的合并操作。 以下是一个简单的实现示例： ```javascript function mergeColspan(data, fields, $table) { for (var i = 0; i < data.length; i++) { for (var j = 0; j < fields.length; j++) { var field = fields[j]; if (i === 0 || data[i][field] !== data[i - 1][field]) { var count = 1; while (i + count < data.length && data[i + count][field] === data[i][field]) { count++; } if (count > 1) { $table.bootstrapTable('mergeCells', { index: i, field: field, colspan: count, rowspan: 1 }); i += count - 1; } } } } } ``` 上述代码中，函数 `mergeColspan` 接收三个参数：数据集 `data`、需要合并的字段数组 `fields` 和表格对象 `$table`。通过遍历数据集，比较当前行与前一行的字段值，如果一致则继续统计连续相同的记录数量，并在满足条件时调用 `mergeCells` 方法执行合并操作 [^3]。 --- ### 示例代码与使用说明 为了更直观地展示如何使用上述方法，下面提供一个完整的 HTML 示例代码片段： ```html <table id="table"></table> <script> var data = [ { id: 1, name: "张三", age: 25 }, { id: 2, name: "李四", age: 30 }, { id: 3, name: "李四", age: 30 }, { id: 4, name: "王五", age: 28 } ]; $('#table').bootstrapTable({ data: data, columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }] }); mergeColspan(data, ['name'], $('#table')); </script> ``` 在该示例中，表格初始化后，通过调用 `mergeColspan` 函数对 `name` 字段进行了跨列合并操作。运行效果为：所有 `name` 相同的记录在表格中会被合并成一个单元格显示 [^3]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值