fnDestroy Error when trying to reset a table with invisible columns
fnDestroy Error when trying to reset a table with invisible columns
Hello,
I must reset a table and fill it with new content in my application. That worked by using fnDestroy after which the table
could be re-initialized. After I introduced columns with the property visible:false that did not longer work. fnDestroy does not return and Chrome and Firefox produce an error message in jQuery. Just the Chrome message:
Uncaught type error: Cannot read property "style" of undefined
The version of jQuery is 1.11.11 and of dataTables 1.10.7. Chrome and Firefox are the latest versions.
I stripped off everything which is not relevant from my app and have this skeleton. The error just occurs when I add additionally the scrollY property during the table initialization.
<!DOCTYPE html>
<html>
<head>
.... get dataTables/jQuery from CDN
<script>
var TestTable = null;
function Init() {
if (TestTable) {
$('#idTestTable').dataTable().fnDestroy();
// this code never gets executed
// the error just happens if scrollY option is set and at least one column is not visible
TestTable = null;
console.log("arrived");
};
TestTable = $('#idTestTable').DataTable({
"scrollY" : "200px",
"columns" : [
{"width": "80px"},
{"visible": false, "orderable": false}
]
});
};
</script>
</head>
<body>
<button onclick="Init();" >Init</button>
<table id="idTestTable" class="display compact">
<thead>
<tr>
<th style="padding:5px;">ID</th>
<th style="padding:5px;">Hidden</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>