[发明专利]一种自定义计算DataTable表格数据的方法

说明书

本发明公开了一种自定义计算DataTable表格数据的方法，包括：首先在html页面完成table的初始建立；然后给table新增thead，添加input type＝checkbox和class＝checkboxAll；再给table新增tbody；再获取table的id；然后给class＝checkboxAll绑定click事件；最后获取选择列的行数据，计算并显示在“合计”列；本发明，通过点击按钮的方式，根据实际使用需求，灵活选择某表头(列)或某几个表头(列)或全选表头(列)，以实现对所选表头(列)的每行数据进行计算，并显示在相应位置。

技术领域

本发明适用于任何HTML、js和css的开发中，涉及表格高级交互领域，具体涉及一种自定义计算DataTable表格数据的方法。

背景技术

本节中的陈述仅提供与本公开相关的背景信息，并且可能不构成现有技术。

Datatable是一款jquery表格插件；其是一个当前使用较为广泛的表格工具，具备按行列显示表格数据、分页、筛选和排序等功能。

现有的表格插件中，当表头(列)项显示为数字，需要按表头(列)计算每行数据时，无法自定义选择某表头(列)或某几个表头(列)或全选表头(列)，以实现对所选表头(列)的每行数据进行计算，并显示在相应位置。

现有的技术方案无法根据需求变化，自定义选择表头(列)，实际操作性、灵活性不强，影响用户体验。

发明内容

本发明的目的在于：针对目前背景技术中提出的问题，提供了一种自定义计算DataTable表格数据的方法，通过修改、完善原datatable的js代码，通过调用函数的方式，使用户可以在操作界面根据实际使用需求解决上述问题。

本发明的技术方案如下：

一种自定义计算DataTable表格数据的方法，包括：

步骤S1：在html页面完成table的初始建立；

步骤S2：给table新增thead，命名为“合计”，添加input type＝checkbox，同时添加class＝checkboxAll；

步骤S3：给table新增tbody，存放计算后的数据；

步骤S4：获取table的id；

步骤S5：通过给class＝checkboxAll绑定click事件，实现点击“合计”thead的选中框，全选所有列或全不选所有列；

步骤S6：获取选择列的行数据，计算并显示在“合计”列。

进一步地，所述步骤S1，包括：

步骤S11：在html页面加载table的grid，添加table的id，并添加jquery表格插件datatable的JS和css；所述table的id，包括：thead和tbody；

步骤S12：给table所有thead添加input type＝checkbox。

进一步地，所述步骤S3，包括：

给table新增tbody，设置属性class＝totalData，与步骤S2中的新增thead对应。

进一步地，所述步骤S4，包括：

通过函数document.getElementById()查找table的id，获取table的对象tableId。

进一步地，所述步骤S5，包括：