ASP.NET MVC DataTable sum 列

Question

我需要對“總計”列求和。 我想將結果添加到表格的頁腳。

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

任何指導表示贊賞。

Answer 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>

ref： Jquery DataTable column Sum （第二個答案中的良好結構參考）

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

Answer 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放置在您想要的任何位置。

Answer 3

我認為最好的辦法是直接從服務器獲取總和，例如 ("/Orders/GetTotal") 您可以一起處理 GetTotal 和 GetList 以防止對數據庫的雙重請求