Функция Datatables «footerCallback» не отображает результат в двух столбцах в нижнем колонтитуле (только в одном)

Question

Я попытался использовать мой существующий код, который работает для одной суммы столбца, чтобы получить сумму, отображаемую в двух столбцах - я попытался установить их в массиве, но он не работает. Разве не возможно использовать для этого простое решение массива?

Это https://jsfiddle.net/setbon/3mvmhL1v/

Это JS:

$(document).ready(function() { 
var table = $('#example').DataTable({ 
    rowReorder: { 
    selector: 'td:nth-child(2)' 
    }, 
    responsive: true, 
    scrollX: true, 
    scrollY: "80vh", 
    scrollCollapse: true, 
     paging: true, 
    lengthChange: false, 
    lengthMenu: [ [10, 25, -1], [10, 25, "All"] ], 
    "order": [[ 0, "asc" ]], 
    "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 all pages 
     total = api 
      .column([3,4]) 
      .data() 
      .reduce(function (a, b) { 
       return intVal(a) + intVal(b); 
      }, 0); 

     // Total over this page 
     pageTotal = api 
      .column([3,4], { page: 'current'}) 
      .data() 
      .reduce(function (a, b) { 
       return intVal(a) + intVal(b); 
      }, 0); 

     // Update footer 
     $(api.column([3,4]).footer()).html(
      total 
     ); 
    }, 
    buttons: ['pdf'] 
}); 

table.buttons().container() 
    .appendTo('#example_wrapper .small-6.columns:eq(0)'); 

}); $ (document) .foundation();

Поскольку я хочу суммировать более одного столбца, мне теперь нужно использовать дополнительный плагин за https://datatables.net/plug-ins/api/sum()? Даже для этого плагина я не смог найти пример с более чем одним столбцом, который я могу скопировать и легко настроить.

In this SO question код очень отличается от того, что у меня есть, и меня смущает. Также this SO answer is difficult for me to understand and I don't know how to apply to resolve my problem

Answer 1

Рабочий пример: https://jsfiddle.net/guanzo/wx5mr9vs/1/

Если я вас правильно понял, вы хотите ту же сумму в 2 колонки. Это легко достигается, вам не нужен плагин.

Во-первых, один из ваших рядов с номером 8 имеет «Токио» вместо номера для зарплаты. Вот почему у вас $ NaN в вашем jsfiddle.

Во-вторых, api.column() используется для выбора одного столбца. Чтобы выбрать несколько столбцов, просто сделайте вызов функции множественным числом, api.columns([3,4]) и он должен работать. В вашем предоставленной jsFiddle, у вас есть только 4 колонки, а значит, вы не имеете 4-ый индекс столбца, поэтому я сделал

$(api.columns([2,3]).footer()).html(
    '$'+total 
); 

документация хорошо организована: https://datatables.net/reference/api/

EDIT: Каждый столбец сноска содержит это собственная сумма

https://jsfiddle.net/3mvmhL1v/4/

в основном вам нужно выполнить операцию суммирования по каждой колонке по отдельности. Объединение суммы для обоих столбцов в одну переменную вам не поможет.

var sumColumns = [3,4] 

sumColumns.forEach(function(colIndex){ 
     // Total over all pages 
    var total = api 
     .column(colIndex) 
     .data() 
     .reduce(function (a, b) { 
      return intVal(a) + intVal(b); 
     }, 0); 

    // Update footer 
    $(api.columns(colIndex).footer()).html(
     total 
    ); 
})