Jquery DataTable column Sum

问题

I just refer this link to get idea how to get the column total in jquery data tables. But I have done half of my project. I do not have any definition in html page. all include in Jquery side.

In HTML

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

Defined data table like below in 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' }
        ],
    });

How to add footerCallback part in my case? The example in web link is defined the total in tfoot. In my case it is not. How to do this?

EDIT 1

Fill data to 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');
    }
});

回答1:

The easiest way to get sum of any field do this:

Add the 'footerCallback' function into DataTable() as follow and get 'data' parameter.

Example:

$("#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);
       }
})

Be careful about the position of data index you want.

Enjoy it!!!

回答2:

Assuming you want to sum the "order total column” (column number 4), you could do it as in the example provided by the Datatables documentation:

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

And then the table needs the tfoot for the callback to be executed:

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

Note that if the table does not have a tfoot element, this callback will not be fired.

You can find more about footerCallback here.

来源：https://stackoverflow.com/questions/50438142/jquery-datatable-column-sum

标签

jquery

html

datatables