Uncaught TypeError: Cannot read properties of undefined (reading 'rows') at Object.sort

vlada77

I'm using Datatables 1.12.1 (bootstrap) with jQuery 3.6.1 and ajax data loading. I'm getting following errors in console when I click on column headers:
Chrome - Uncaught TypeError: Cannot read properties of undefined (reading 'rows') at Object.sort
Firefox - Uncaught TypeError: e.tBodies[0] is undefined

Data sorting works, but I'm not sure why I get those error messages.
There are no errors in console if I disable scrollX and scrollY options.

How to remove those errors?

HTML code:
<table class="table table-bordered table-striped table-hover table-primary" width="100%" id="tblList"> <thead> <tr> <th>ID</th> <th>File number</th> <th>District</th> <th>Type</th> <th>Power [kW]</th> <th>Buyer</th> <th>Phone</th> <th>E-mail</th> <th>Region</th> <th>Domain</th> <th>Address</th> </tr> </thead> <tbody> </tbody> </table>

Java script:
var table = $('#tblList').DataTable({ "processing": true, "serverSide": true, "ajax": { "url": "ajaxurl.php", "type": "POST" }, "deferRender": true, "order": [[ 1, "desc" ]], columnDefs: [ { className: "align-middle", targets: "_all" }, {className: "text-center", targets: [1,2,3,4,6,7,8]}, { "targets": 0, "visible": false, "searchable": false, "orderable": false} ], "displayStart": 0, "pageLength": 25, "scrollX": true, "scrollY": "62vh", "scrollCollapse": true, "stateSave": true, "stateDuration": -1 });

Server response:
{"draw":"2", "recordsTotal":"2", "recordsFiltered":2, "data":[ ["1","1","District 1","Type 1","15","Some buyer","648987878","test@test.com","Region 1","Domain 1","Some street 1"], ["2","2","District 2","Type 2","20","Some buyer 2","321654","test2@test.com","Region 2","Domain 2","Some street 2"] ]}

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

kthorngren

Here is a SSP example using DT 1.12.1, jQuery 3.6.1 and Bootstrap 5 that works:
http://live.datatables.net/mogesugo/1/edit

Guessing you have a click event for the column headers which is causing the error. Try debugging the click event. If you still need help then please update my example, provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

vlada77

Thanks for reply.
Codeigniter 4 debugger fired those errors after click event. Everything works normal after I disable it.

allan

So just to confirm, this isn't a DataTables problem?

Allan

vlada77

DataTables works well, other script caused errors.

cviarouge

Hi vlada77,

I have the same issue with codeigniter 4 debugger.

Could you explain me how you proceed to remove the error in console ?
Did you just disable debugger or did you prevent click event ?

Waiting to read you

Chris

allan

Hi Chris,

Perhaps you can post a link to a test case showing the issue so we can help to debug it.

Allan

rcov

In my case this bug was being caused due to the interaction of Kint's toolbar script (in CodeIgniter 4) with DataTables sorting click event (in scrollable tables only).

You can disable the toolbar rendering in development/testing enviroment (yet keeping the rest of the enviroment features) by changing the debug mode configuration from defined('CI_DEBUG') || define('CI_DEBUG', true); to defined('CI_DEBUG') || define('CI_DEBUG', false);. You can find this configuration at /app/Config/Boot/{your_environment}.

allan

Thanks for posting your findings.

Allan