自定义计算Datatable表格数据的通用模块设计与实现

摘要：Datatable是一款基于jQuery库的表格插件，能够快速创建功能强大、高度灵活的数据表格，满足Web页面中数据呈现的需求。在实际使用过程中，经常需要将Datatable表格中数据按要求灵活进行计算并显示。文章主要论述了基于jQuery框架下的表格组件Datatable的灵活计算方法，设计并实现了自定义计算Datatable表格数据通用模块，用户可以在操作界面根据实际使用需求，对所选表头的每行数据进行计算，并显示在相应位置。该模块适用于HTML及Java⁃Script开发，实际操作性强，复用性好，可以提升项目开发效率和用户体验。

关键词：jQuery；Datatable；自定义计算

中图分类号：TP311 文献标识码：A文章编号：1009-3044（2023）16-0068-03

0 引言

在互联网技术不断进步和企业信息化建设水平发展的背景下，基于B/S架构下的Web项目开发已成为主流技术[1]。在实际开发过程中，数据呈现是大多数系统必备的功能，Datatable表格工具便是一款当前使用较为广泛的解决方案，具备按行列显示表格数据、分页、筛选和排序等功能[2]。现有的Datatable表格插件中，如果表格内容显示为数字，当需要按照表头计算该列每行数据时，无法自定义选择某列、某几列或全选列，以实现对所选列项的每行数据进行相应计算，并显示在对应位置。现有的技术方案无法根据需求变化，灵活选择Datatable表格列项，实际操作性、便捷性不强，影响用户体验。针对目前背景技术中提出的问题，本文提供了一种自定义计算Datatable表格数据的方法，通过修改、完善原Datatable的JavaScript代码，以调用函数的方式，应用于HTML显示界面，使用户可以在操作界面根据实际使用需求解决上述问题。

1 流程设计

依据基于jQuery的组件设计通用思路，在此基础上拓展Datatable表格插件功能方法[3]。首先在HTML页面，使用grid网格控件搭建table表格，完成table表格的初始建立，搭建基本框架，并在JavaScript中绑定基于jQuery的Datatable组件，实现Datatable基本表格显示功能。给table表格新增一个表头标签，命名为“合计”，并为该表头标签添加class="checkbox⁃All"自定义属性类；同时给table表格所有表头标签添加表单标签，以提供选项框。给table表格新增表格主体内容，存放计算后的数据。通过JavaScript获取table表格的唯一标识id；并给class="checkboxAll"属性类绑定click点击事件，以实现用户在操作界面点击“合计”表头标签的选中框，可以全选table表格中所有列或全不选所有列，同时获取选择列的行数据，计算并显示在“合计”列。流程设计图如图1所示。

其中，JavaScript简称JS，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，作用是：嵌入动态文本于HTML页面，对用户操作浏览器事件作出响应，实现相关功能[4]。CSS是指层叠样式表，作用是：描述HTML 文档样式，本文是通过调用原有的Datatable的CSS样式，将表格显示出来[5]。

本文设计并实现的通用模块可以使用户在页面上，根据实际使用需求，仅通过点击按钮的方式，灵活选择某表头或某几个表头或全选表头，即可对所选表头的每行数据进行计算，并显示在相应位置。

2 技术方案

除了基本的显示、分页、排序、搜索功能外，基于jQuery的Datatable组件还支持扩展和二次开发，以实现更加灵活的定制化功能。本文通过编写Datatable组件的JavaScript 代码，实现相关拓展功能，并辅以CSS层叠样式表，为HTML页面添加更多的功能和样式。基于上述流程设计的详细技术方案如下：

1） 在HTML页面完成table表格的初始建立，加载table表格的网格控件grid，包括：表头标签和表格内容；给table表格所有表头标签添加表单标签，实现通过以选择框的形式可对该列进行勾选选择；添加table表格的唯一标识id，并添加jQuery 表格插件Datatable 的JS 和CSS，实现Datatable插件基础功能，如：显示、语言设置、分页、排序、搜索等。

2） 给table表格新增表头标签，命名为“合计”，添加表单标签，实现可对该列的选择框进行选择与取消，同时为其添加自定义类属性：class="checkboxAll"；其中，checkbox 类型的 元素在默认情况下呈现为激活时被选中（打钩）的方框，即为选中框。

3） 给table表格新增表格内容，用以存放计算后的数据，同时为其添加自定义类属性：class="totalData"，与第2步中的新增表头标签对应，便于查找、存放数据。

4） 在JavaScript 中，通过函数document.getEle⁃mentById（）查找table表格的唯一标识id，获取table表格的对象tableId，此处可以根据用户习惯命名。

5） 在JavaScript 中，通过给属性类class="check⁃boxAll"绑定click点击事件，实现点击“合计”的选中框，即可实现全选所有列或全不选所有列：通过给相关具有check属性的表头标签赋值true（$（"in⁃put[type='checkbox']"）.attr（{"checked"：true}）） ，实现全选所有列；通过给相关具有check属性的表头标签赋值false（$（"input[type= 'checkbox']"）. attr（{"checked"：false}）） ，实现全不选所有列。其中，.attr（）为相关属性（"input[type='checkbox']"） 赋状态（true/false） ，分别表达打勾和去勾；给HTML 页面上所有的"input[type='checkbox']"绑定change触发事件，实现当页面任意选中框发生变化时（即选中/不选中状态变化时），在Ja⁃vaScript中动态获取每一列的行数据，并按列项分别保存至对应数组。

6） 获取选择列项的行数据，计算并显示在“合计”列。由于用户自定义选择列项的随机性，可在Java⁃Script中申明动态数组cellData = {}，根据选择列项的多少动态分配数组空间；通过查找"input[type='check⁃box']"类属性，给其绑定change 触发事件，针对在HTML 页面所有的"input[type='checkbox']"类属性状态变化时触发，实现当页面任意选中框发生变化时，即选中/不选中状态变化时，可以动态获取每一列的行数据，并按列项分别保存至对应数组：①通过获取的table 表格对象，得到该table 表格对象的列数：tableId.rows[0].cells.length；②遍历获取对象的列数，调用之前申明的动态数组cellData{}，动态分配与列数相同的数组：cellData[array]；③ 利用选项属性标识check，查看table表格的每一列是否被选中：if（tableId.rows[0]. cells[]. children[0]. checked，此处返回true 或false；④遍历选中的列，获取每一个选中列的行数据：tableId.rows[].cells[].innerHTML，并将行数据按列存放至数组cellData[array]中；⑤根据计算需求，遍历每一个cellData[array]数组，对每一个数组按元素顺序进行计算，并保存至存放结果的数组中totalData[]；⑥将totalData[]按顺序赋值给类属性为class="totalData"的表单内容标签以显示：$（$（".totalData"）[]）.HTML（totalData[]）。

任意勾选表头选择框，实现对该勾选列每行数据进行计算，并显示在对应“合计”列，如图2、图3所示。

点击“合计”表头选择框，实现对table表格所有表头的全选，并对选择列的每行数据进行计算，并将结果显示在“合计”列的对应行，如图4所示。

4 分析总结

综上所述，Datatable是一个强大且灵活的表格组件，可以为Web开发项目提供很大的帮助。通过对其进行扩展和二次开发，可以实现更加定制化的功能，满足特定业务需求。在实际开发中，用户可以根据具体需求采取不同的措施来优化Datatable的功能和性能，以提高用户体验和项目效率。

参考文献：

[1] 舒红平，刘魁.基于Java的Web通用查询组件设计及应用[J].成都信息工程学院学报，2006，21（3）：359-363.

[2] 斯蒂芬森.SQL 入门经典[M].5版. 北京：人民邮电出版社，2011.

[3] 沈浩，邓晓军.基于ASP.NET的批量Excel数据导入通用模块的设计与实现[J].电脑知识与技术，2012，8（34）：8101-8102，8108.

[4] 王艳梅，丁玲.JavaScript技术在Web网页中实践分析[J].自动化应用，2022（12）：62-65.

[5] 黄肇基，陈焕英.基于CSS3导航栏悬浮特效的应用与研究[J].电脑编程技巧与维护，2023（3）：143-145.

【通联编辑：谢媛媛】