DataTables.net столбец таблицы сумма в футере

у меня возникли проблемы с крошечной деталью при вставке значения суммы каждого столбца с классом " sum " в его нижний колонтитул.

код (более или менее взятый прямо из DataTables.net) идет:

var table = $('#example').DataTable();
        table.columns('.sum').each(function (el) {
            var sum = table
                .column(el)
                .data()
                .reduce(function (a, b) {
                    return parseInt(a, 10) + parseInt(b, 10);
                });
            $(el).html('Sum: ' + sum);
        });

" sum " имеет правильное значение, но как-то не вставляется в нижний колонтитул! Т. е. its-элемент отображается пустым.

обратите внимание, что фрагмент ниже работает нормально, но я хочу суммировать каждый столбец с классом сумма.

var table = $('#example').DataTable();
var column = table.column(4);

$(column.footer()).html(
    column.data().reduce(function (a, b) {
        return parseInt(a, 10) + parseInt(b, 10);
    })
);

////////////////////////////////////////////////////////////////////////////////////

EDIT-обходной путь:

я переместил код туда, где инициализируется DataTable, и вместо этого пошел с footerCallback. См. ниже код:

"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 this page
                    pageTotal = api
                        .column('.sum', { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column('.sum').footer()).html(pageTotal);
                }

как-то теперь значение вставляется в правый элемент tfoot. До сих пор не знаю, почему это не сработает в первую очередь (но, как упоминалось в порядке комментариев включение JS-файлов могло иметь отношение к некоторым из них).

Теперь мне просто нужно выяснить, как цикл нескольких столбцов с class= "sum"...

10
datatables javascript jquery jquery-datatables

2 ответов

ваш код манипуляции таблицей должен выполняться только при инициализации DataTable (см. initComplete свойства).

также убедитесь, что у вас есть <tfoot></tfoot> блок, определенных в <table> в противном случае не было бы нижнего колонтитула.

в противном случае вы были очень близки к решению, см. ниже исправленный код:

var table = $('#ticketTable').DataTable({
    'initComplete': function (settings, json){
        this.api().columns('.sum').every(function(){
            var column = this;

            var sum = column
                .data()
                .reduce(function (a, b) { 
                   a = parseInt(a, 10);
                   if(isNaN(a)){ a = 0; }                   

                   b = parseInt(b, 10);
                   if(isNaN(b)){ b = 0; }

                   return a + b;
                });

            $(column.footer()).html('Sum: ' + sum);
        });
    }
});

посмотреть это JSFiddle для образец.

обновление

есть еще footerCallback свойство, которое позволяет вам определить функцию обратного вызова нижнего колонтитула, которая будет вызываться на каждом событии "draw".

разницу между initComplete и footerCallback это initComplete вызывается один раз а footerCallback на каждом событии "ничья".

если вы показываете сумму для всей таблицы,initComplete должно хватить. В противном случае, если вам нужно показать в нижнем колонтитуле данные, относящиеся только к текущей странице (как в пример обратного вызова нижнего колонтитула), используйте .

8

Mix. Пустой заменен на 0 

"initComplete": function (settings, json) {
        this.api().columns('.sum').every(function () {
            var column = this;

            var intVal = function (i) {
                return typeof i === 'string' ?
                i.replace(/[$,]/g, '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            var sum = column
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                });

            $(column.footer()).html('Sum: ' + sum);
        });
    }
2