sum in footerCallback with scroller problem

jvcunha

Hi,
I using sum (current page) in footerCallback with scroller to respect the filters and feet.
In scrooler, sum change and not really totals.
My code:

$.ajax({
    type: 'POST',
    url: 'Rel.aspx/GetData',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: '{cli: 0, ger: 0, parc: 0, dataI: '"2017-05-01"','"2017-05-15"', band: 0, tipo: 0, stat: 0}',
    success: function (msg) {
        var numFormat = $.fn.dataTable.render.number('.', ',', 2, '').display;
        var ret = msg.d.split('@');
        var erro = ret[0].indexOf('Erro') != -1;
        var arq = !erro ? ret[0] : fillEmptyTable();
        var table = $('[id$=myTable]').DataTable({
            sDom: '<"H"lBfr>t<"F"ip>',
            order: [[1, 'asc'], [2, 'asc'], [0, 'asc']],
            pagingType: 'full_numbers',
            lengthMenu: [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, 'Todos']],
            iDisplayLength: -1,
            searchHighlight: true,
            jQueryUI: true,
            ajax: arq,
            orderClasses: true,
            deferRender: true,
            destroy: true,
            scrollX: true,
            scrollY: '38vh',
            scrollCollapse: true,
            scroller: true,
            select: { style: 'single' },
            initComplete: function () {
                $('input[type=search]').addClass('clearable');
                setTimeout(function () { $('[id$=myTable]').DataTable().columns.adjust() }, 10);
            },
            columns: [
                { width: '30%' }, 
                { width: '8%' },  
                { width: '8%' },  
                { width: '6%' },  
                { width: '10%' }, 
                { width: '10%' }, 
                { width: '4%' },  
                { width: '10%' }, 
                { width: '2%' },  
                { width: '30%' }, 
                { width: '30%' }, 
                { width: '30%' }  
            ],
            columnDefs: [
                {
                    type: 'date',
                    targets: 1,
                    mRender: function (data, type) {
                        return (type == 'display')
                            ? formatDate1(data)
                            : data;
                    }
                },
                {
                    type: 'num-fmt',
                    targets: 7,
                    sClass: 'right',
                    mRender: function (data, type) {
                        return (type == 'display')
                                   ? numFormat(data)
                                   : data;
                    }
                },
                {
                    targets: 9,
                    title: cliId == 4 ? 'Aluno' : 'Adic.&nbsp;1'
                },
                {
                    targets: 10,
                    title: cliId == 4 ? 'CPF' : 'Adic.&nbsp;2'
                },
                {
                    targets: 11,
                    title: cliId == 4 ? 'Matrícula' : 'Adic.&nbsp;3'
                }
            ],
            language: dataTableLanguagePTBR,
            buttons: [
                {
                    extend: 'excelHtml5',
                    text: '<img src="/images/Excel24x24.png" width="24" height="24" alt="">',
                    titleAttr: 'Exportar para Excel',
                    title: 'Analítico de Notas Fiscais - ' + $('[id$=tit]').val(),
                    exportOptions: {
                        columns: ':visible',
                        orthogonal: 'export'
                    }
                },
                {
                    extend: 'print',
                    text: '<img src="/images/printer24x24.png" width="24" height="24" alt="">',
                    titleAttr: 'Imprimir',
                    message: '  Impresso por: <strong>' +
                        'Test' +
                        '</strong> em: <strong>' +
                        formatDateTime1(new Date()) +
                        '</strong>',
                    exportOptions: {
                        columns: ':visible'
                    },
                    customize: function (win) {
                        $(win.document.body)
                            .css('font-size', '10pt');

                        $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');

                        $(win.document.body).find('h1')
                            .html('');
                    }
                },
                dataTableScrollButton
            ],
            fnRowCallback: function (nRow, aData) {
                if (aData[8] == 'Canc.') {
                    $(nRow).css('color', '#ff0000');
                }
                if (aData[10] != '') {
                    $('td:eq(9)', nRow).html(aData[9].toUpperCase());
                    $('td:eq(10)', nRow).html(cpf_mask(aData[10]));
                }
            },
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();

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

                var pageTotal = api
                    .column(7, { page: 'current' })
                    .data()
                    .reduce(function (aT, bT) {
                        console.log(intVal(aT) + intVal(bT));
                        return intVal(aT) + intVal(bT);
                    }, 0);

                $(api.column(7).footer()).html(
                    numFormat(pageTotal)
                );
            }
        });
    },
    error: function (xhr) {
        alert(xhr.responseText);
    }
});

allan

Please link to a test page showing the issue so it can be debugged.

Thanks,
Allan

jvcunha

Hi Allan,
sending you link in private. NDA contract with customer ...

jvcunha

Allan,
did you get my update in your email?
Thanks

allan

Yes sorry - I've not had a chance to look into it yet - I will do so shortly.

Allan

shaheed0

I have the same problem
can you post the solution here ?

allan

@jvcunha - Really sorry for the delay in getting back to you about this!

The issue is related to the use of:

.column(7, { page: 'current' })

in the footerCallback. The problem is that you are using Scroller which makes use of DataTables' paging internally. It doesn't look like it does visually, but it does (that's where it gets it speed benefits from).

So try using this instead:

.column(7, { search: 'applied' })

Allan

jvcunha

Thanks Allan,
perfect solution!
Regards