Jquery DataTable столбец Sum

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

Заполнить данные до данных

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

Самый простой способ получить сумму любого поля:*

$("#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, этот обратный вызов не будет запущен.

ВыВы можете найти больше информации о footerCallback здесь .