DataTables reconstruction with dynamic ajax thead
DataTables reconstruction with dynamic ajax thead
anthonyCoco
Posts: 2Questions: 1Answers: 0
Hello,
I have a problem when reconstructing my DataTables with a varying number of columns. My code dynamically creates a HTML table on an ajax call then creates DataTables with other data on serverside once it is built.
Here is my code below:
<div id="TableContainer" class="table_top">
<table id="Table" class="table scrollx text_center">
<thead>
<tr>
</tr>
</thead>
</table>
</div>
<script>
var table;
if(table != undefined){
table.clear();
table.destroy();
$('#Table').html('<thead><tr></tr></thead>').removeClass('no-footer').removeAttr('role').removeAttr('aria-describedby').removeAttr('style') ;
table = undefined;
}
$.ajax('/en/ajax/back.php',{filter : getFilters()},function(result) {
//Here I complete my #Table <head>
//Call function to complete DataTable
completeMyTable();
});
function completeMyTable(){
//Load DataTables
if(table == undefined){
table = $('#Table').DataTable({
destroy: true,
'language' : dataTablesMenuTrad,
'serverSide': true,
"processing": true,
"iDisplayLength": 10,
"scrollX": true,
"dom": '<"top">frt<"bottom"lip><"clear">',
responsive: false,
ajax: {
url: '/' + lang + '/ajax/myData',
type: 'POST',
data: function(data) {
data.filter = getFilters();
},
dataSrc: function(json) {
//Construction of my data
}
},
}
else
table.ajax.reload();
}
</script>
For the first construction I have no problems since my variable 'table' is undefined. We can use a filter on my page which will update the columns then recontruct my table, to do this I clear the DataTables then destroy and put my variable as 'undefined', I recreate my table thread and recreate the DataTables.
But during reconstruction I get this error message:
"jquery.dataTables.js:5570 Uncaught TypeError: Cannot read property 'style' of undefined
at _fnCalculateColumnWidths (jquery.dataTables.js:5570)
at _fnInitialise (jquery.dataTables.js:4693)
at loadedInit (jquery.dataTables.js:1320)
at HTMLTableElement.<anonymous> (jquery.dataTables.js:1332)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at r.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
at r.fn.init.$.fn.DataTable (jquery.dataTables.js:15134)
at myFonction (script.js:64)
at script.js:334"
Please can you help me find the problem?
This discussion has been closed.
Answers
You might want to use
$.fn.dataTable.isDataTable()to determine if the Datatables has been initialized.Typically is a result of a mismatch in the number of columns in the
tableand what Datatables is trying to use. Without seeing this code in action it would be hard to diagnose. I would start by inspecting the resulting HTML table and compare that to the data you construct in theajax.dataSrcfunction.Kevin
This error appends before my DataTables ajax is called.
I put some console.log in the DataTables construction and they are not called at the reconstruction.
Its hard to say what's happening without being able to see it. Can you post a link to your page or provide a test case replicating the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
If you need an ajax data source you can use one of the templates here:
https://datatables.net/manual/tech-notes/9
Kevin