1

Пользуюсь datatables.net.
Есть таблица с товарами, их кол-вом, а так же производителями.
Для каждого столбца (товара) подсчитывается общая сумма (общее кол-во по всем производителям).
Добавил фильтр по производителям и теперь необходимо вычислять после фильтрации кол-во по текущему производителю.
Из примеров нашел в документации только сложение по определенному указанному столбцу, а как по всем такое же сделать - не могу найти.

  1. Вариант с общей суммой и фильтром можно увидеть тут.

Код суммы по всем столбцам:

$('#datatable').DataTable({

                 paging: false,
                        "language": {
                "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Russian.json"   
            },
        dom: 'Bfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
            'print'
        ],

        "initComplete": function () {
            this.api().columns('.who').every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );

            //Сумма по всем столбцам
            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);
        });
      }
    });
  1. Вариант с общей суммой по указанному столбцу после фильтра можно увидеть тут.
    Код суммы после фильтра по определенному столбцу:
$('#datatable').DataTable({

                 paging: false,
                        "language": {
                "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Russian.json"   
            },
        dom: 'Bfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
            'print'
        ],

        "initComplete": function () {
            this.api().columns('.who').every( function () {
                var column = this;
                var select = $('')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( ''+d+'' )
                } );
            } );

      },

        "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(2)
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

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

            // Update footer

            $( api.column(2).footer() ).html(
                '$'+pageTotal +' ( $'+ total +' total)'
            );
        }   

    });
1
  • Решение: Разобрался используя функцию footerCallback и правильный метод указания текущей страницы с нужным мне классом для суммирования. Итоговый вариант можно посмотреть тут: jsfiddle.net/BartyHan/o41dkmko/1
    – BartyHan
    28 авг 2016 в 7:39

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.