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. 1'
},
{
targets: 10,
title: cliId == 4 ? 'CPF' : 'Adic. 2'
},
{
targets: 11,
title: cliId == 4 ? 'Matrícula' : 'Adic. 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);
}
});