Why is drawBack called so many times?
Why is drawBack called so many times?
Rawland_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
Oh, I think it's getting called for every search pane too! But why? I can't access the "table" object either.
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 usesdraw()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
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.
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
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?
Here is a thread about searchPanes calling draw multiple times. Sounds like it is needed for searchPanes functionality.
Kevin
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?
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