ASP.NET MVC 数据表总和列答案

【问题标题】：ASP.NET MVC DataTable sum columnASP.NET MVC 数据表总和列
【发布时间】：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>

感谢任何指导。

【问题讨论】：

标签： jquery json ajax asp.net-mvc

【解决方案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 网格使用类似的解决方案。他们从单独的请求中从服务器端获取总值和表数据