首页 > 解决方案 > ASP.NET MVC 数据表总和列

问题描述

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

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

任何指导表示赞赏。

标签: jqueryjsonajaxasp.net-mvc

解决方案


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

<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 列 Sum (第二个答案中的良好结构参考)

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


推荐阅读