Uncaught TypeError: Cannot read properties of undefined (reading 'rows') at Object.sort
Uncaught TypeError: Cannot read properties of undefined (reading 'rows') at Object.sort
vlada77
Posts: 3Questions: 1Answers: 0
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:
Answers
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
Thanks for reply.
Codeigniter 4 debugger fired those errors after click event. Everything works normal after I disable it.
So just to confirm, this isn't a DataTables problem?
Allan
DataTables works well, other script caused errors.
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
Hi Chris,
Perhaps you can post a link to a test case showing the issue so we can help to debug it.
Allan
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);todefined('CI_DEBUG') || define('CI_DEBUG', false);. You can find this configuration at/app/Config/Boot/{your_environment}.Thanks for posting your findings.
Allan