Type Error: Cannot read properties of undefined (reading 'sClass')

Type Error: Cannot read properties of undefined (reading 'sClass')

jamtur01jamtur01 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

  • jamtur01jamtur01 Posts: 3Questions: 1Answers: 0

    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.

  • jamtur01jamtur01 Posts: 3Questions: 1Answers: 0
  • kthorngrenkthorngren Posts: 20,420Questions: 26Answers: 4,794

    Datatables doesn't support colspan within the tbody. See the HTMNL requirements doc for details.

    Kevin

  • oma95tooma95to Posts: 6Questions: 0Answers: 0

    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 :)

  • allanallan Posts: 61,970Questions: 1Answers: 10,160 Site admin

    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

  • oma95tooma95to Posts: 6Questions: 0Answers: 0
    edited April 16

    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

  • allanallan Posts: 61,970Questions: 1Answers: 10,160 Site admin

    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

  • oma95tooma95to Posts: 6Questions: 0Answers: 0

    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

  • allanallan Posts: 61,970Questions: 1Answers: 10,160 Site admin

    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 colspan attribute, 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

  • oma95tooma95to Posts: 6Questions: 0Answers: 0

    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.

  • allanallan Posts: 61,970Questions: 1Answers: 10,160 Site admin

    It works without colspan but it doesn't with it

    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:

    <table>
      <thead>
        <tr>
          <th>A</th>
          <th colspan="2">B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>A</th>
          <th>B</th>
        </tr>
      </tbody>
    </table>
    

    is not valid.

    Removing the colspan would 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?

  • oma95tooma95to Posts: 6Questions: 0Answers: 0

    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:

    <thead>
            <tr>
                <th data-priority="1">Position</th>
                <th data-priority="1">Driver</th>
                <th data-priority="2">Car</th>
                <th colspan="2" data-priority="3"><a href="/Race/RaceResult/536">Suzuka</a> *</th>
                <th colspan="1" data-priority="3"><a href="/Race/RaceResult/537">Nordschleife</a> *</th>
                <th colspan="2" data-priority="3"><a href="/Race/RaceResult/538">Watkins Glen</a> *</th>
                <th colspan="2" data-priority="3"><a href="/Race/RaceResult/539">Spa Francorchamps</a> *</th>
                <th colspan="2" data-priority="3"><a href="/Race/RaceResult/540">Oulton Park</a> *</th>
                <th colspan="2" data-priority="3"><a href="/Race/RaceResult/541">Misano</a> *</th>
                <th data-priority="1">Total points</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="background: #ffe000; color: black;" data-order="1">P 1</td>
                <td><a href="/User/14">M. Heeley</a></td>
                <td>Porsche 718 Cayman GT4 Clubsport <br /> 15% Bonus (62.2)</td>
                <td class="text-center" style="background: #ce8707; color: black;" data-order="3">P3<br />42.0 (P: +4) Points</td>
                <td class="text-center" style="background: #c3c3c3; color: black;" data-order="2">P2<br />48.0 (P: +4) (FL: +1) Points</td>
                <td class="text-center" data-order="4">P4<br />74.0 Points</td>
                <td class="text-center" style="background: #ce8707; color: black;" data-order="3">P3<br />42.0 Points</td>
                <td class="text-center" style="background: #ce8707; color: black;" data-order="3">P3<br />42.0 Points</td>
                <td class="text-center" data-order="4">P4<br />37.0 Points</td>
                <td class="text-center" data-order="4">P4<br />37.0 Points</td>
                <td class="text-center" style="background: #ffe000; color: black;" data-order="1">P1<br />55.0 Points</td>
                <td class="text-center" data-order="5">P5<br />33.0 Points</td>
                <td class="text-center" data-order="100">&nbsp;</td>
                <td class="text-center" data-order="100">&nbsp;</td>
                <td class="text-right">477.2</td>
            </tr>
    

    And without:

    <table id="GT3Protable" class="table table-hover table-bordered table-striped">
        <thead>
            <tr>
                <th data-priority="1">Position</th>
                <th data-priority="1">Driver</th>
                <th data-priority="2">Car</th>
                <th colspan="1" data-priority="3"><a href="/Race/RaceResult/528">Suzuka</a> *</th>
                <th colspan="1" data-priority="3"><a href="/Race/RaceResult/529">Nordschleife</a> *</th>
                <th colspan="1" data-priority="3"><a href="/Race/RaceResult/530">Watkins Glen</a> *</th>
                <th colspan="1" data-priority="3"><a href="/Race/RaceResult/531">Spa Francorchamps</a> *</th>
                <th colspan="1" data-priority="3"><a href="/Race/RaceResult/532">Oulton Park</a> *</th>
                <th colspan="1" data-priority="3"><a href="/Race/RaceResult/533">Misano</a> *</th>
                <th data-priority="1">Total points</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="background: #ffe000; color: black;" data-order="1">P 1</td>
                <td><a href="/User/84">K. Cahnbley</a></td>
                <td>Nissan GT-R Nismo GT3 '18 <br /> 15% Bonus (24.8)</td>
                <td class="text-center" style="background: #c3c3c3; color: black;" data-order="2">P2<br />48.0 (FL: +1) Points</td>
                <td class="text-center" data-order="7">P7<br />28.0 Points</td>
                <td class="text-center" data-order="5">P5<br />33.0 Points</td>
                <td class="text-center" data-order="100">NS</td>
                <td class="text-center" style="background: #ffe000; color: black;" data-order="1">P1<br />55.0 Points</td>
                <td class="text-center" data-order="100">&nbsp;</td>
                <td class="text-right">189.8</td>
            </tr>
    

    Hope this helps understanding the issue, thank you again

  • allanallan Posts: 61,970Questions: 1Answers: 10,160 Site admin

    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

  • oma95tooma95to Posts: 6Questions: 0Answers: 0

    Thanks to you :)

Sign In or Register to comment.