Uncaught TypeError: Cannot read properties of undefined (reading 'style') when using language:url
Uncaught TypeError: Cannot read properties of undefined (reading 'style') when using language:url
![wsteven24](https://secure.gravatar.com/avatar/5b27514f708061a493139dd3501a0834/?default=https%3A%2F%2Fvanillicon.com%2F5b27514f708061a493139dd3501a0834_200.png&rating=g&size=120)
Hello! I have an error sometimes when datatables loads with language:url. This is my code:
var tbDocumentDetails = $('#tbDocumentDetails').DataTable({
scrollX: true,
searching: false,
info: false,
language: { url: 'https://cdn.datatables.net/plug-ins/1.12.1/i18n/es-ES.json' },
columnDefs: [{ targets: '_all', createdCell: function (td, cellData, rowData, row, col) { $(td).css('padding', '0') } }]
});
$(document).ready(function () {
tbDocumentDetails.column(2).visible(false);
});
Link to test case: https://jsfiddle.net/thsL8az3
Error messages shown:
Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at Ja (jquery.dataTables.min.js:69:475)
at sa (jquery.dataTables.min.js:29:479)
at B.<anonymous> (jquery.dataTables.min.js:151:438)
at B.iterator (jquery.dataTables.min.js:122:423)
at B.<anonymous> (jquery.dataTables.min.js:151:409)
at Function.adjust (jquery.dataTables.min.js:125:349)
at B.<anonymous> (jquery.dataTables.min.js:151:208)
at B.iterator (jquery.dataTables.min.js:122:423)
at B.<anonymous> (jquery.dataTables.min.js:150:483)
at B.<anonymous> (jquery.dataTables.min.js:127:131)
Description of problem:
The error happens sometimes... and always in the line tbDocumentDetails.column(2).visible(false); If I change language:{url: ''} by the language object (no ajax) it works propoerly.
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
Thanks for the test case, but it doesn't run and demonstrate the issue - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Also check the
language.ajax
option's docs which note that using that option makes the initialisation of the DataTable async. So if the file is cached, it might work, but if not and there is a slow network, it might not.Use
initComplete
orinit
to know when the DataTable is ready.Allan
I'm having the same issue, but I don't think I can rely on the "init" event in my case.
Here's my test case:
https://live.datatables.net/hutoxepu/1/
I want to load my data asynchronously, so when I initialize the datatable, I pass an empty array as "data". An empty table is then drawn. Later on, when my data has been loaded, I add it to the table. Also, I want to select some rows as soon as the data arrives, so that they appear selected when the user first sees the data in the table. Sometimes the data is available immediately though (e.g. it has already been loaded and cached). I assume that in this case I'm trying to select the rows before the table is fully initialised (the "language" isn't downloaded yet), and that's why this error happens.
As I said, I can't use the "init" event as it fires on the very first table draw (when the table is empty), and my data may not be available just yet.
As far as I understand, I need to do the rows selection after both my data has been loaded and the table has been initialized. While I could implement this logic in this straightforward way, I'm hoping it can be done easier.
@Tablefak
Try placing your setTimeout() function in
intComplete
orinit
. This way the function doesn't start until thelanguage.url
is complete. See the note in the docs:If you still need help please update the test case so it runs and shows the issue. Look at the browser's console, you have a syntax error on this statement:
Kevin
Hi, Kevin.
Yes, that's exactly what I did, and it's working fine. Thanks a lot.