如何计算HTML表格中的总和 [英] How to calculate the total sum in HTML table

问题描述

我已经更新了Google Apps表格中的Google表格表格，并在此应用中使用了日期选择器和其他过滤器选项。我的表格由一些数字组成（Row-Chargeback）我试图在我的Web应用程序的左上角产生总计（Sum）。

这应该只显示所选天数

请参阅示例表

解决方案

您可以使用 sum（）api 从数据表中获取总金额。

 < script type =text / javascriptlanguage =javascriptsrc =/ /cdn.datatables.net/plug-ins/1.10.15/api/sum().js\"></script> 
  

在表格标签前添加HTML元素，以显示总金额。

 < p id =sum>< / p> 
  

然后在表数据表初始化期间添加下面的回调函数。

  drawCallback：function（）{
 var api = this.api（）; 
 $（＃sum）。html（
Total Amount：+ api.column（4，{page：'current'}）.data（）。sum（）。toLocaleString（） 
）; 
} 
  

注意：由于您使用的是多个插件，的性能将插件整合到单个CDN链接中，而不是向DataTables CDN发出多个请求。

I have updated the google sheet tables in Web Apps and in this web app with date picker and other filter option. My table consists of some numbers (Row-Chargeback ) I am trying to generate the grand total (Sum) in the top left of my web app.

This should show only the number of selected days

for detailed script refer the sheet sample Sheet

解决方案

You can use sum() api from datatable to get total of amount. You need to add below cdn.

<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/1.10.15/api/sum().js"></script>

Add HTML element before table tag, to display the sum amount.

<p id="sum"></p>

And then add the below callback function during the table datatable initialization.

drawCallback: function () {
              var api = this.api();
              $("#sum").html(
                "Total Amount: "+api.column( 4, {page:'current'} ).data().sum().toLocaleString()
              );
            }

Note: Since you are using multiple plug-ins, it is beneficial in terms of performance to combine the plug-ins into a single CDN Link wherever possible, rather than making multiple requests to the DataTables CDN.

这篇关于如何计算HTML表格中的总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！