Uncaught TypeError: Cannot read properties of undefined (reading 'render')

rotirk

Debugger code (debug.datatables.net):
line of code in which the error occurs render: $.fn.dataTable.render.number('.', '.', '', '') // Format number AFTER sorting
Error messages shown:
Uncaught TypeError: Cannot read properties of undefined (reading 'render')
Description of problem:
The problem occurs just for some users not sure why the table do not shows up or initalize. Couldn't find why it is doing that and at least what I know is that the users are using Edge.

allan

That error message means that $.fn.dataTable is undefined. That suggests to me that either:

1. DataTables is not loaded on the page, or
2. jQuery has been loaded multiple times on the page.

Without a test case I can't be sure, but I would guess that (2) is more likely.

Allan

rotirk

Hi @allan I tried to remove the jquery from the page and then it says that $ is not defined so I guess thats not the issue. Basically I'm integrating datatables into Microsoft Power Apps. I'm using a function asynchrounsly to fill up the data and it works but for lets say few users (2-3 users) it throws this message. Only thing which I could see is that the jquery was in head and datatables js after the body. So I will try also to move the jquery right above the datatables js and see could that fix it.

allan

If you are able to give me a link to the page, I'd be happy to take a look over it and see where things are going "hiccup".

Allan

rotirk

Unfortunatelly I can't because it is in Microsoft platform Power Apps integration

allan

I'm afraid there isn't a huge amount of help I can offer in that case other than to suggest you check the network inspector in your browser and make sure jQuery is only being loaded once (assuming that is even the issue - I'm afraid I don't know for sure!).

Allan

rotirk

Is it possible because it breaks on this line:
columnDefs: [ { targets: 6, // Place de column index here (0 to N) render: $.fn.dataTable.render.number('.', '.', '', '') // Format number AFTER sorting }],

to use this render in the column itself?
I think that the render fails because the data is not yet filled. I'm using asychronius functions, promises because Microsoft Web Api provides data in that manner.

kthorngren

Do you mean columns.render? Yes you can use it instead.

I think that the render fails because the data is not yet filled. I'm using asychronius functions, promises because Microsoft Web Api provides data in that manner.

Using $.fn.dataTable.render.number('.', '.', '', '') works when using ajax loaded data. The number renderer will only run on rows that are in the table. If you initialize an empty Datatable then it won't run. If some of your data is missing in the row when the row is added then use defaultContent. Otherwise I'm not sure why asynchronously loaded data would cause the problem. Maybe you can provide more details of why you think this might be the issue.

Possibly you are using an old version of Datatables that doesn't have the number renderer (``$.fn.dataTable.render.number()`). Whet version of Datatables are you using?

Kevin

rotirk

Ok I did put the render into the columns.render function. But now the problem is that the sorting is not working correctly at some point. Btw Kevin I'm not using ajax I'm literally first filling up the data and adding it with the function datatable.row.add(item).

https://prnt.sc/zyYOosn6o_px

My case is that I need to loop through one array and in that array to loop once more because it is quite nested.

kthorngren

Sounds like you need to use Orthogonal data to return the formatted number for just the display operation. This way the original data can be used for sorting and searching.

The process of using row.add() won't cause the error you are seeing. The number renderer and columns.render are essentially the same thing. Maybe you have an early version of Datatables that doesn't have the number renderer built-in. I'm not sure where it was introduced.

If you are using the single row.add() to add one row at a time in the loop. Make sure to use draw() after the loop so it runs only once. Might help with performance if you are using datatable.row.add(item).draw() in the loop.

Kevin

rotirk

It is strange that when I use ColumnDef with the same render the sorting is fine without any issues and just like I sad on the first topic the datatable is showing for lets say 8 users from 10 and only 2 of them do not see the table.. I'm not sure why but for example one user which did not see the table reported to me that now he see it but I did not change anything .

Yes I'm using the draw method after the .add. Sorry forgot to mention that.

Also the version of the datatables is 1.12.1

kthorngren

only 2 of them do not see the table

Do you see errors in the browser's console? Or is it just the above error in your first post?

Sounds like you have some out of the ordinary things happening. Without seeing the problem its hard to say what the issue might be. Maybe clear the browser's cache for the users with problems. Try a different browser.

Kevin

rotirk

The error which I did screenshot from them is the one above in first post. And they just use Microsoft Edge, nothing else They did clean the browser's cache and did not help them. It is really strange. I will see in future if they now see the table without problems.