Why is drawBack called so many times?

Rawland_Hustle

Link to test case: http://themeadow.se/ntjperrors/#0
Debugger code (debug.datatables.net):
Error messages shown: No error messages shown.
Description of problem:
Why is drawBack being called 11 times when I load my page? That can be right?

$(document).ready(function(){

    var table = $('#errorTable').DataTable( {
        "ajax": {
           "url": "http://themeadow.se/ntjperrors/ErrorCalls.php",
           "dataSrc": ""
        },
        "dom": "P<'myfilter'f>rlBptip",
        "pageLength": 100,
        "fixedHeader": true,
        "order": [[ "1", "asc" ]],
        "buttons": [
            'excel', 'print'
        ],
        "searchPanes": {
            "cascadePanes": true,
            "i18n": {
                "emptyMessage": "Data saknas"
            },
            panes: [
                {
                    header: "Snabbfilter",
                    options: [
                        {
                            label: "Tidböcker som inte finns i NTjP",
                            value: function(rowData, rowIdx) {

                                return rowData.ServiceConsumerHsaId === "SE2321000016-92V4" && rowData.ServiceContract.startsWith("urn:riv:crm:scheduling") && rowData.ErrorCode === "VP004";
                            }
                        }
                    ],
                    dtOpts: {
                        searching: false,
                        order: [[1, "desc"]]
                    }
                }
            ]
        },
        "columns": [
            {"data": "ServiceConsumerHsaId"},
            {"data": "ServiceConsumerDescription"},
            {"data": "ServiceContract"},
            {"data": "ServiceContract"},
            {"data": "LogicalAddress"},
            {"data": "LogicalAddressDescription"},
            {"data": "ErrorCode"},
            {"data": "ServiceProducerHsaId"},
            {"data": "ServiceProducerDescription"},
            {"data": "EndpointUrl"},
            {"data": "SnapshotTime"},
            {"data": "Requests"},
        ],
        "columnDefs": [
            { "width": "15%", "targets": 1 },
            { "width": "15%", "targets": 6 },
            { "width": "15%", "targets": 9 },
            {
                "targets": [ 9, 10 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 5 ],
                "data": "LogicalAddressDescription",
                "render": function ( data, type, row, meta ) {

                    if (data) {
                        return data;
                    } else {
                        return '<a class="missingLogicalAdressDescription" href="#0">Hämta beskrivning</a>';
                    }

                }
            },
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": true,
                "data": "ServiceContract",
                "render": function ( data, type, row, meta ) {

                    if (data === 'null') {
                        return data;
                    } else {
                        data = data.split( ":" );
                        data = data.slice(0, -2);
                        data= data.join(":")
                        data = data.replace("urn:riv:","");
                        return data;
                    }

                }
            },
            {
                "targets": 3,
                "data": "ServiceContract",
                "render": function ( data, type, row, meta ) {

                    if (data === 'null') {
                        return data;
                    } else {
                        data = data.split( ':' );
                        let version = data[data.length - 1];
                        data = data[ data.length - 2 ];
                        let substringToRemove = "Responder";
                        data = data.slice(0,-(substringToRemove.length));
                        return data + " v" + version;
                    }

                }
            },
            {
                "searchPanes": {
                    "show": true
                },
                "targets": [1, 2, 5, 6, 8]
            },
            {
                "searchPanes": {
                    "show": false
                },
                "targets": [0, 4, 7, 9, 10, 11]
            }
        ],
        "rowGroup": {
            "dataSrc": "ServiceConsumerDescription"
        },
        "language": {
            "decimal":        "",
            "emptyTable":     "Ingen data tillgänglig i tabellen",
            "info":           "Visar _START_ till _END_ av _TOTAL_ rader",
            "infoEmpty":      "Visar 0 till 0 av 0 rader",
            "infoFiltered":   "(filtrerat från _MAX_ rader)",
            "infoPostFix":    "",
            "thousands":      ",",
            "lengthMenu":     "Visa _MENU_ rader",
            "loadingRecords": "Laddar...",
            "processing":     "Bearbetar...",
            "search":         "Sök:",
            "zeroRecords":    "Inga matchningar",
            "paginate": {
                "first":      "Första",
                "last":       "Sista",
                "next":       "Nästa",
                "previous":   "Föregående"
            },
            "aria": {
                "sortAscending":  ": Aktivera för att sortera stigande",
                "sortDescending": ": Aktivera för att sortera fallande"
            },
            "searchPanes": {
                "loadMessage": 'Laddar filtreringspaneler...',
                "title": {
                    _: '%d filter valda',
                    0: 'Inga filter valda',
                    1: 'Ett filter valt'
                },
                "collapseMessage": 'Fäll in',
                "showMessage": 'Visa',
                "clearMessage": 'Rensa'
            }
        },
        "drawCallback": function( settings ) {
alert("The cell was clicked.");
            var api = this.api();

            var totalNumberOfFailedRequest = api.column( 11, {filter:'applied'} ).data().sum();
            var totalNumberOfFailedRequestPrettified = totalNumberOfFailedRequest.toLocaleString()

            $("#totalNumberOfFailedRequest").text(
                totalNumberOfFailedRequestPrettified
            );

            $(".missingLogicalAdressDescription").on("click", function(){
            alert("The cell was clicked.");
        });
        }

    });

});

Rawland_Hustle

Oh, I think it's getting called for every search pane too! But why? I can't access the "table" object either.

kthorngren

I'm not 100% sure but I believe it has to do with searchPanes. I think normally there would be two calls to drawCallback; once for the initial empty table then once after the ajax data load. I suspect that searchPanes uses draw() causing multiple draw events - maybe one of reach pane. Looks like you have 7 panes. You can test this by temporarily removing the searchPanes config.

You probably won't want to create a click event inside drawCallback. Each time a particular row is called an additional event handler will be added. Use delegated events as shown in this example.

Kevin

Rawland_Hustle

Thank you! For some reason I can't access the "data" object so the code in the example you supplied returns "undefined". Something is wrong.

kthorngren

The example uses arrays so its using array notation data[0]. You are using objects so you would use this for column 0, data.ServiceConsumerHsaId.

Kevin

Rawland_Hustle

Thanks man! But regarding my initial question, you don't think it's wrong that drawBack() is being called 11 times when I load my page?

kthorngren

Here is a thread about searchPanes calling draw multiple times. Sounds like it is needed for searchPanes functionality.

Kevin

Rawland_Hustle

Okay. Thank you! Nothing I can do about that obviously. Can you see anything else in my code that would slow down the loading of my table?

kthorngren

See this FAQ for speed improvement options. When I load the page it takes about 2 seconds for the XHR response. Part of that delay might be the networking between the US and where the web site is hosted. The delay suggests the problem is with the server side. You can implement server side processing to page the server data. You will need a server script to handle the SSP protocol. The SSP examples use this ssp.class.php script.

Kevin