Type Error: Cannot read properties of undefined (reading 'sClass')
Type Error: Cannot read properties of undefined (reading 'sClass')
jamtur01
Posts: 3Questions: 1Answers: 0
Link to test case: Website is behind auth
Debugger code (debug.datatables.net): okahog
Error messages shown:
Uncaught TypeError: Cannot read properties of undefined (reading 'sClass')
at oe (datatables.min.js:16:14190)
at Ce (datatables.min.js:16:29154)
at ye (datatables.min.js:16:22504)
at Oe (datatables.min.js:16:33344)
at O (datatables.min.js:16:6955)
at HTMLTableElement.<anonymous> (datatables.min.js:16:7142)
at Function.each (jquery-3.7.0.min.js:2:3129)
at ce.fn.init.each (jquery-3.7.0.min.js:2:1594)
at ce.fn.init.$ [as dataTable] (datatables.min.js:16:1300)
at B.fn.DataTable (datatables.min.js:16:91021)
Description of problem:
I upgraded to Databtables 2.03, which includes all my dependencies from DT 1.
My config:
// DataTables
document.addEventListener("DOMContentLoaded", function () {
DataTable.moment("DD-MM-YYYY");
const table = new DataTable("#coinTable", {
responsive: true,
searching: true,
ordering: true,
paging: true,
buttons: ["copy", "excel", "pdf"],
order: [[1, "asc"]],
columnDefs: [
{
targets: "no-sort",
orderable: false,
},
],
lengthMenu: [
[25, 50, 75, -1],
[25, 50, 75, "All"],
],
});
});
Answers
Answering my own question. I was using colspan=2 for two columns, and it worked fine in DT 1, but it seems DT 2 doesn't like it. Removing the colspan resolved the issue.
And I just found: https://datatables.net/forums/discussion/comment/229757/#Comment_229757. Adding here for closure.
Datatables doesn't support colspan within the
tbody. See the HTMNL requirements doc for details.Kevin
Good morning,
I have a similar issue, always the same exception at:
TypeError: Cannot read properties of undefined (reading 'sClass')
at oe (datatables.min.js:16:14224)
at Ce (datatables.min.js:16:29188)
at ye (datatables.min.js:16:22538)
at Oe (datatables.min.js:16:33378)
at O (datatables.min.js:16:6955)
at HTMLTableElement.<anonymous> (datatables.min.js:16:7142)
at Function.each (jquery.min.js:2:3003)
at S.fn.init.each (jquery.min.js:2:1481)
at S.fn.init.$ [as dataTable] (datatables.min.js:16:1300)
at B.fn.DataTable (datatables.min.js:16:91089)
I can see that "t" is 15 while the array is long 15 elements and therefore is out of boundaries making r undefined.
I use colspan but only in the header as previosly with v1.x
You can find the table at the following link: https://simracingxp.com/championship/result/36
Thank you in advance for the help
Looks like you have more columns in the header than you do in the
tbody:Do you mean to have
colspan="2"in some of the header cells?Allan
HI Allan,
Thank you for your reply.
That's the curious fact, I do not if you look at the html before being read from the datatable.js. It seems like they get added aftewards during the datatable init.
The colspan is in the right places already (Suzuka, Watkins, Spa Oulton, Misano)
It used to be working with the previous version, same page changing nothing else if not the js
I've probably tightened something up if it used to work and no longer does. If you can link to a test case showing the issue I can look into it further.
Allan
Hi Allan,
Sorry what do you need for a test case? The link I already gave you it's my test case.
https://www.simracingxp.com/Championship/Result/35#results in this case no colspan is used and is working properly.
Hope it helps
Thanks
Sorry - I'd forgotten about the link above, and I'm a bit confused now.
So without the
colspan="2"is works correctly? And I recall now when I looked at it before I asked about why that was there in the HTML, since it wasn't needed, and was breaking the HTML.The solution seems to be not to have the
colspanattribute, since it isn't needed - and with your latest link, without it, the page seems to work correctly?Is that all correct? Are you happy that the table is now rendering correctly basically?
Allan
Hi Allan,
No worries. It works without colspan but it doesn't with it. The two links I gave you are two different tables and one uses the colspan while the other doesn't (the one that does have two races for each event making it necessary). Not sure if I did anything wrong or something else is needed but all I did is just changing the references to the new version.
But the colspan in the original table was making the table invalid HTML. If you add up all the columns in the one using colspan, there are mroe columns in the table than in the body of it.
For example:
is not valid.
Removing the
colspanwould make it valid, or adding another column in the table body.If the form shown above used to work, that then was an error - it shouldn't have
Or have I misunderstood?
Hi Allan,
the table is created properly in both cases, with and without colspan.
If you can look at the source code (so that is before the js takes control over the table) you will notice it.
This for example is the head and the first row with colspan:
And without:
Hope this helps understanding the issue, thank you again
Thank you! It does look like there might be an issue there: https://live.datatables.net/milimeka/1/edit . Let me get back to you on that.
Allan
Thanks to you
This issue happens when you have more/less columns in your table in the html file than in the js file, where you load the data.