Uncaught TypeError: Cannot read properties of undefined (reading 'style') when using language:url

wsteven24

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.

colin

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

allan

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 or init to know when the DataTable is ready.

Allan

Tablefak

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.

kthorngren

@Tablefak

Try placing your setTimeout() function in intComplete or init. This way the function doesn't start until the language.url is complete. See the note in the docs:

Note that when this parameter is set, DataTables' initialisation will be asynchronous due to the Ajax data load. That is to say that the table will not be drawn until the Ajax request has completed. As such, any actions that require the table to have completed its initialisation should be placed into the initComplete callback.

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:

for (var i = 0; i <; i++) {

Kevin

Tablefak

Hi, Kevin.

Yes, that's exactly what I did, and it's working fine. Thanks a lot.