Slow footerCallback

Slow footerCallback

dynasoftdynasoft Posts: 446Questions: 69Answers: 3
edited September 2023 in DataTables 1.9

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

  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948
    edited September 2023

    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 variables a and b. 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 the footerCallback is called.

    Kevin

  • dynasoftdynasoft Posts: 446Questions: 69Answers: 3

    Thanks a lot. I will review things and streamline where i can

Sign In or Register to comment.