ASP.NET MVC 数据表总和列

Posted 2023-05-08

【中文标题】ASP.NET MVC 数据表总和列

【英文标题】：ASP.NET MVC DataTable sum column

【发布时间】：2021-01-26 00:45:22

【问题描述】：

我需要对“总计”列求和。我想将结果添加到表格的页脚。

<script>
    $(document).ready(function () 
        $("#orderTable").DataTable(
            
                "ajax": 
                    "url": "/Orders/GetList",
                    "type": "GET",
                    "datatype": "json"
                ,
                "columns": [
                     "data": "CustomerName" ,
                     "data": "OrderDate" ,
                     "data": "Total" ,
                ]
            );
    );
</script>

感谢任何指导。

【参考方案1】：

对于寻找解决方案的其他人：

<script>
    $(document).ready(function () 
        $("#orderTable").DataTable(
            
                "ajax": 
                    "url": "/Orders/GetList",
                    "type": "GET",
                    "datatype": "json"
                ,
                "columns": [
                     "data": "CustomerName" ,
                     "data": "OrderDate" ,
                     "data": "Total" ,
                ],

                 footerCallback: function (row, data, start, end, display) 
                    var api = this.api(), data;
                    // Remove the formatting to get integer data for summation
                    var intVal = function (i) 
                        return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                    ;

                    // Total over this page
                    data = api.column(2, 
                        page: 'current'
                    ).data(); pageTotal = data.length ? data.reduce(function (a, b)  return intVal(a) + intVal(b); ) : 0;

                    // Update footer
                     $(api.column(2).footer()).html('$' + pageTotal);
                
            );
    );
</script>

参考：Jquery DataTable column Sum （第二个答案中的良好结构参考）

参考：https://www.ihbc.org.uk/consultationsdb_new/examples/advanced_init/footer_callback.html

【参考方案2】：

有一个名为drawCallback的选项，如下所示。

 drawCallback: function () 
        var yourSum = $('#orderTable').DataTable().column(number).data().sum(); // column number just like 1 , 2, 3, 4  ............... which you try to add 
        $('#total').html(sum); // #total is your html element id
       

和 HTML 总计：

 <div id="total"></div>

通过 CSS 将您的 div 放置在您想要的任何位置。

【参考方案3】：

我认为最好的办法是直接从服务器获取总和，例如 ("/Orders/GetTotal") 您可以同时处理 GetTotal 和 GetList 以防止对数据库的双重请求

【讨论】：

@Foster90 据我所知，剑道和 Telerik 网格使用类似的解决方案。他们从单独的请求中从服务器端获取总值和表数据