Jquery DataTable列求和

Question

我参考了此链接，以获取在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”部分？网络链接中的示例已在tfoot中定义了总数。而在我的情况下，是没有定义的。怎么办？

编辑1

填充数据到DataTable

$.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');
    }
});

- weeraa

---

在这个例子中，footerCallback函数生成了总和。你需要编写自己的代码来完成这个任务。 - episch

这就是我所问的，如何在上述代码中嵌入页脚到jQuery数据表部分？ - weeraa

"footerCallback": function ( row, data, start, end, display ) { // 你的代码 !!! }, 这段代码应该插在你的插件初始化 "DataTable({ HERE CALLBACK })" 中间。 - episch

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);
       }
})

请注意你所需数据索引的位置。

享受它吧！

- Kenlly Acosta

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元素，则不会触发此回调函数。 您可以在这里了解有关footerCallback的更多信息。

- muecas

---

非常感谢您的解释，muecas。但是我卡住的地方是，我使用AJAX调用填充数据到datatable中（编辑1部分）。您可以看到我只是使用它来绑定数据值。但在给定的示例中，该如何做呢？ - weeraa

@weeraa，为什么不使用Datatables实现Ajax而是自己实现呢？ - muecas

Answer 3

footerCallback 数据将显示一个循环数组，对元素求和将给出总数。

$("#datatable_id").DataTable({
     "footerCallback": function (row, data, start, end, display) {                
                var totalQTY = 0;
                data.forEach(element => {
                     console.log('element    ===> ', element.qty)
                     totalQTY += parseFloat(element.qty);
                });
              
                console.log('total qty', totalQTY)
      }
})

- Mohamed Raza