ASP.NET MVC DataTable总和列

如何解决ASP.NET MVC DataTable总和列

我需要对“总计”列进行汇总。我想将结果添加到表的页脚中。

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

任何指导表示赞赏。

解决方法

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

<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 （第二个答案中提供了良好的结构参考）

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

,

有一个名为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放在您想要的任何地方。

,

我认为最好的做法是直接从服务器获取总和，例如（“ / Orders / GetTotal”） 您可以一起处理GetTotal和GetList，以防止对数据库的双重请求