Why is drawBack called so many times?

Why is drawBack called so many times?

Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

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.");
        });
        }

    });

});

Replies

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0
    edited April 2022

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited April 2022

    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_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited April 2022

    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

Sign In or Register to comment.