Jquery DataTable 列总和

Question

我只是参考this link 来了解如何获取 jquery 数据表中的列总数。但是我已经完成了一半的项目。我在 html 页面中没有任何定义。都包含在 Jquery 端。

在 HTML 中

 <table id="tblCollection" class="display" cellspacing="0" width="100%">
                                        </table>

在 Jquery 中定义如下数据表。

   tblColectionData = $("#tblCollection").DataTable({
        "ordering": true,
        columns: [
            { title: 'OrderId', data: 'OrderId' },
            { title: 'Ordered Date', data: 'OrderPlaceDateTime' },
            { title: 'Customer Name', data: 'CustomerName' },
            { title: 'Restaurant Name', data: 'RestaurantName' },
            { title: 'Order Total', data: 'OrderTotalAmount' }
        ],
    });

如何在我的情况下添加 footerCallback 部分？ Web 链接中的示例在 tfoot 中定义。在我的情况下，它不是。如何做到这一点？

编辑 1

将数据填充到数据表中

$.ajax({
    type: 'post',
    url: serverLocation + "/api/dashboard/getOrderData",
    dataType: 'json',
    data: JSON.stringify(reqJson),
    contentType: "application/json; charset=UTF-8",
    success: function (response) {
        tblColectionData.clear().draw();
        tblColectionData.rows.add(response).draw();
    },
    error: function (textStatus, errorThrown) {
        console.log('Err');
    }
});

Answer 1

获取任何字段总和的最简单方法是：

将'footerCallback'函数添加到DataTable()中，并获取'data'参数。

例子：

$("#example_table").DataTable({
     "footerCallback": function (row, data, start, end, display) {                
                //Get data here 
                console.log(data);
                //Do whatever you want. Example:
                var totalAmount = 0;
                for (var i = 0; i < data.length; i++) {
                    totalAmount += parseFloat(data[i][4]);
                }
                console.log(totalAmount);
       }
})

注意你想要的数据索引的位置。

好好享受吧！！！

Answer 2

假设您想对“订单总列”（第 4 列）求和，您可以按照 Datatables 文档提供的示例进行操作：

$('#tblCollection').dataTable( {
    ordering: true,
    columns: [
        { title: 'OrderId', data: 'OrderId' },
        { title: 'Ordered Date', data: 'OrderPlaceDateTime' },
        { title: 'Customer Name', data: 'CustomerName' },
        { title: 'Restaurant Name', data: 'RestaurantName' },
        { title: 'Order Total', data: 'OrderTotalAmount' }
    ],
    footerCallback: function( tfoot, data, start, end, display ) {
        var api = this.api();
        $(api.column(4).footer()).html(
            api.column(4).data().reduce(function ( a, b ) {
                return a + b;
            }, 0)
        );
    }
});

然后表需要tfoot 来执行回调：

<table id="tblCollection" class="display" cellspacing="0" width="100%">
    <thead>
         <tr>
            <th>Order id</th>
            <th>Order date</th>
            <th>Customer name</th>
            <th>Restaurant name</th>
            <th>Order total</th>
        </tr>
    </thead>
    <tbody>
         ... your data here ...
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
         </tr>
    </tfoot>
</table>

请注意，如果表格没有 tfoot 元素，则不会触发此回调。

你可以找到更多关于footerCallbackhere的信息。