Draw (and other) events not firing when data is loaded by Javascript variable
Draw (and other) events not firing when data is loaded by Javascript variable
Loren Maxwell
Posts: 406Questions: 99Answers: 10
I have two identical tables except that one uses an ajax call to load the data and the other uses a Javascript variable for the data.
I want to each of them to be hidden if there's no data in the table, so I've added the following on API method to both:
$(function() {
var table = $("#table").DataTable({
yada yada yada
}).on("draw", function() {
if (!table.data().any()) {
$("#table_wrapper").children().hide();
} else {
$("#table_wrapper").children().show();
}
});
});
This works for the ajax-sourced table, but it doesn't seem the draw event occurs for the Javascript variable-sourced table. I've also tried the init event and the processing event, etc, but none work.
By inserting a console.log("drawing"); line I've verified the JS variable-sourced table never enters the on("draw") function at all.
Does this work correctly or should I be looking at a different event that would work?
Code for the ajax-sourced Datatable:
$(function() {
var table = $("#table").DataTable({
"paging": false,
"autoWidth": true,
"columnDefs": [{
"targets": "_all",
"render": $.fn.dataTable.render.text(),
"searchPanes": {
"show": false
}
}],
"ajax": {
"url": "/wiki/extensions/GHSFHA/models/mRegionPlayoffGames.php",
"data": {
"season": "2020",
"organization": "GHSA",
"class": "AAAA",
"region": "5"
}
},
"columns": [{
"data": "game_type",
"name": "game_type"
}, {
"data": "game_date",
"name": "game_date"
}, {
"data": "playoff_game",
"name": "playoff_game"
}, {
"data": "playoff_game_score",
"name": "playoff_game_score"
}],
"ordering": false,
"searching": false,
"info": false,
"dom": "tri"
}).on("draw", function() {
console.log("drawing");
if (!table.data().any()) {
$("#table_wrapper").children().hide();
} else {
$("#table_wrapper").children().show();
}
});
});
For the JS variable-sourced Datatable:
var table_data = [];
$(function() {
var table = $("#table").DataTable({
"paging": false,
"autoWidth": true,
"columnDefs": [{
"targets": "_all",
"render": $.fn.dataTable.render.text(),
"searchPanes": {
"show": false
}
}],
"columns": [{
"data": "game_type",
"name": "game_type"
}, {
"data": "game_date",
"name": "game_date"
}, {
"data": "playoff_game",
"name": "playoff_game"
}, {
"data": "playoff_game_score",
"name": "playoff_game_score"
}],
"ordering": false,
"searching": false,
"info": false,
"dom": "tri",
"data": table_data
}).on("draw", function() {
console.log("drawing");
if (!table.data().any()) {
$("#table_wrapper").children().hide();
} else {
$("#table_wrapper").children().show();
}
});
});
This question has an accepted answers - jump to answer
Answers
I think the issue is the order of events (for lack of a better word)
With Ajax loaded data its async so while waiting for the response Javascript continues running, instantiating the
drawevent. But with JS or DOM sourced data the Datatables initialization is synchronous and complete before instantiating thedrawevent.I think
drawCallbackshould work. Or you can do something like this:Note I think you will need the
.dtfor the Datatables namespace.Kevin
Thanks, @kthorngren. I tried the
drawCallBackoption. As before, worked with ajax-sourced data but not with Javascript variable-sourced data:Didn't try the other method yet, but I'd like to see if I can keep it to a more elegant solution that would be more intuitive when reading it.
Actually, let me update this -- the
drawCallBackoption doesn't work for the ajax-loaded data either.Waitaminute! I was using
drawCallBackinstead ofdrawCallback.I'm testing, so I'll post back later with the final solution for posterity's sake.
Here was the final code:
Thanks, Kevin!