таблицы данных суммируют отфильтрованные данные

Я использую плагин jquery с данными на своем сайте. Все работает хорошо.

Однако я пытаюсь улучшить таблицу, используя фильтр столбца скрипта плагина, а затем я хочу суммировать данные в нижнем колонтитуле. Я могу заставить фильтр работать правильно.

Пример в таблицах данных для суммирования данных работает только на странице данных или на всем наборе данных.

Я нашел эту тему: http://datatables.net/forums/discussion/2053/fnfootercallback-sum-column-after-filter/p1 в поисках аналогичного решения. Автор предлагает следующую функцию:

._('td:nth-child(4)', {"filter": "applied"})

Очевидно, это возвращает объект отфильтрованных данных. Однако, когда у меня есть это, я не знаю, с чего начать добавлять данные

На данный момент мой скрипт с данными (укороченный ради поста) выглядит так:

table.dataTable({...


    "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {

        /*
                     * Calculate the total sales for the table (ie inc. outside
                     * the pagination)
                     */
        var iTotalSales = 0;
        for ( var i=0 ; i<aaData.length ; i++ )
        {
            iTotalSales += aaData[i][2]*1;
        }

        /* Calculate the total sales on this page */
        var iPageSales = 0;
        for ( var i=iStart ; i<iEnd ; i++ )
        {
            iPageSales += aaData[ aiDisplay[i] ][2]*1;
        }

        /* Modify the footer row to match what we want */
        var secondRow = $(nRow).next()[0];
        var nCells = secondRow.getElementsByTagName('td');
        nCells[0].innerHTML = accounting.formatMoney(iPageSales, "£ ", 2) +
                ' Page Total ('+ accounting.formatMoney(iTotalSales, "£ ", 2) +' Total Sales)';
    }

})
        .columnFilter({
            aoColumns: [ { type: "date-range" },
                null,
                { type: "text"  },
                { type: "text"  },
                { type: "select"  },
                { type: "select"  }
            ]

        })
        ._('td:nth-child(4)', {"filter": "applied"});

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

Я новичок в jquery - я не уверен, с чего начать манипулировать объектом, созданным в финальном вызове.

Спасибо


jquery jquery-datatables
person Ray    schedule 15.03.2013    source источник
comment
Вы решили это? сейчас пытаюсь сделать...   -  person Pitto    schedule 19.08.2013

Ответы (2)


arrow_upward
4
arrow_downward

Когда вы запускаете ._('td:nth-child(4)', {"filter": "applied"}), вы получаете массив значений этого столбца, возвращенный вам. Итак, если ваша таблица выглядит так после фильтрации:

col 1 | col 2 | col 3 | col 4
foo   | blah  |   $18 |   154
bar   | blech |    $2 |   109

... затем следующая команда

var col4 = $('#mytable').dataTable()._('td:nth-child(4)', {"filter": "applied"})

... даст вам col4 = [154, 109]. Оттуда вы просто проходите по col4, чтобы суммировать его значения, и вручную вставляете результат в строку нижнего колонтитула в соответствующем месте.

person DiMono    schedule 16.01.2014
comment
Спасибо за отличное объяснение - я отложил эту часть в свой проект - теперь я могу добавить ее. Спасибо еще раз - person Ray; 18.01.2014
comment
Нет проблем, рад помочь. На самом деле я пришел сюда, чтобы решить ту же проблему, увидел ваш вопрос, и это привело меня к решению. - person DiMono; 21.01.2014

arrow_upward
2
arrow_downward

В таблицах данных 1.10 вы можете использовать метод столбцов в API. Помните, что он существует только в том случае, если вы вызываете .DataTable вместо .dataTable. Это сбило их с толку на час, потому что я переносил старый код таблиц данных.

В приведенном ниже примере создается таблица данных, а затем привязывается функция, которая выполняется при пересчете нижнего колонтитула. При пересчете нижнего колонтитула функция ищет в таблице столбец, содержащий стоимость. Затем он суммирует значения в этом столбце для:

  1. Данные отображаются в столбце на текущей странице таблицы данных.
  2. Все данные в таблице в столбце.
  3. Данные в столбце, которые существуют в строках, соответствующих критериям фильтра.

Так что смотрите переменную searchTotalData :)

var dataTable = $('#csvtable').DataTable({
    'footerCallback': function(row, data, start, end, display){
        var api = this.api();
        var intval = function(i){
            //Excuse this ugliness, it comes from the datatables sample
            return typeof i === 'string' ? 
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ? 
                    i : 0;
        };

        var costColumnIndex = $('th').filter(function(i){return $(this).text() == 'Cost';}).first().index();
        var totalData= api.column(costColumnIndex).data();
        var total = totalData.reduce(function(a ,b){ return intval(a) + intval(b); }, 0) .toFixed(2);
        var pageTotalData = api.column(costColumnIndex, {page: 'current'}).data();
        var pageTotal = pageTotalData.reduce(function(a,b){return intval(a) + intval(b);}, 0).toFixed(2);
        var searchTotalData = api.column(costColumnIndex, {'filter': 'applied'}).data();
        var searchTotal = searchTotalData.reduce(function(a,b){return intval(a) + intval(b);}, 0).toFixed(2);

        $('#cost').html('Approximate page total $' + pageTotal + ', search total $' + searchTotal + ', totally total $' + total);
    }   
});
person David Mann    schedule 06.05.2014