Slow footerCallback
Slow footerCallback
dynasoft
Posts: 429Questions: 68Answers: 3
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I am using the code below but without the footerCallback, loading takes 20 sec. With it it takes 10mins. Any idea how it can be improved. Many thanks.
dataTable1 = $('#tblDataTable1').DataTable({
order: [[1, 'desc']],
pageLength: 10,
dom: 'Bfrtip',
ajax: {
url: '/' + strAccountIdx1 + '/Admin/ContactTrans/CRUDContactTrans/',
data: function (d) {
return $.extend({}, d, {
intContTpe: booIsGlobal1 == 1 ? -1 : intContTpe1
});
},
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
async: true,
cache: false
},
responsive: true,
processing: true,
deferRender: true,
orderClasses: false,
paging: true,
//serverSide: true,
columns: [
{
data: null,
defaultContent: '',
orderable: false
},
{
data: 'ContactTrans.id', //1
className: 'text-left'
}
//...
],
rowCallback: function myRowCallback(row, data) {
if (IsTransTypeInvoiceLike(data.ContactTrans.TransType)) {
$('td:eq(0)', row).removeClass();
$('td:eq(0)', row).addClass('details-control');
}
else {
$('td:eq(0)', row).removeClass();
$('td:eq(0)', row).addClass('nodetails-control');
}
},
footerCallback: function (row, data, start, end, display) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal1 = function (i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ? i : 0;
};
var intVal2 = function (i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ? i : 0;
};
var intVal3 = function (i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ? i : 0;
};
// Total over all pages
dblNetTotal = api
.column(19, { search: 'applied' })
.data()
.reduce(function (a, b) {
return intVal1(a) + intVal1(b);
}, 0);
dblTaxTotal = api
.column(20, { search: 'applied' })
.data()
.reduce(function (a, b) {
var dblTaxAmount = 0;
$.each(data, function (i, e) {
$.each(e.ContactTransTaxes, function (i, e) {
dblTaxAmount += e.TaxAmount;
});
});
return dblTaxAmount;
}, 0);
dblGroTotal = api
.column(21, { search: 'applied' })
.data()
.reduce(function (a, b) {
return intVal3(a) + intVal3(b);
}, 0);
// Update footer
$('tr:eq(0) th:eq(1)', api.table().footer()).html((booIsGlobal1 == 0 ? strCurrency1 + ' ' : '') + ManageDecimals(4, dblNetTotal));
$('tr:eq(1) th:eq(1)', api.table().footer()).html((booIsGlobal1 == 0 ? strCurrency1 + ' ' : '') + ManageDecimals(4, dblTaxTotal));
$('tr:eq(2) th:eq(1)', api.table().footer()).html((booIsGlobal1 == 0 ? strCurrency1 + ' ' : '') + ManageDecimals(4, dblGroTotal));
},
select: {
style: 'os',
selector: 'td:not(:first-child)'
},
initComplete: function () {
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
PrintToOutput('Open complete: ', time);
}
});
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
How many rows do you have?
I don't understand the code for
dblTaxTotal
in line 72. I think this is where the problem is. You are using the reduce function to loop through the data in column 20 but not using the variablesa
andb
. Inside the reduce loop you are using$.each(data, function (i, e) {
to loop through all the rows. So if you have 100 rows the reduce function will execute 100 times, once for each row. In side that loop the$.each()
function will execute 100 times, once for each row. Unless my calculations are wrong that is 10,000 loop executions each time thefooterCallback
is called.Kevin
Thanks a lot. I will review things and streamline where i can