I cannot get DT to work with Codeigniter 4

pcla56

Hi Team, Its been a while since I have successfully implemented this Lib but recently I have upgraded our website from CI3 to CI4. Its taken me a while.....

One of the last jobs is to get DT working.

I have got the hermawan server-side classes installed, and have the following js:

$(document).ready(function() {
var url = '/get-gobigs';
$('#dataTables-static').DataTable({
processing: true,
serverSide: true,
ajax: {
url: url,
method: 'POST'
},
columns: [
{data: 'id'},
{data: 'user_id'},
{data: 'reference'},
{data: 'color'},
{data: 'rendered_time'},
{data: 'inspiration'},
]
});
});

We use the latest jquery 3.7.1

When I load the View containing the table I also source the following code:

<link href="https://cdn.datatables.net/v/bs/dt-2.3.6/datatables.min.css" rel="stylesheet">

However I get no data in the <tbody> tags of the table! In the Console I see the following:

jQuery.Deferred exception: can't access property "sClass", a is undefined ne@https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4:14880
Fe@https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4:31383
Te@https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4:24405
We@https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4:36099
https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4:7340
each@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:3129
each@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:1594
V@https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4:1418
H.fn.DataTable@https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4:98438
https://www.goodnewsbig.com/res/js/admin/admin_dt.js:3:29
e@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:27028
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:27330
setTimeout handlerhttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:27594
c@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:25304
fireWith@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:26053
fire@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:26089
c@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:25304
fireWith@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:26053
ready@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:29112
P@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:28884
EventListener.handleEventhttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:29264
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:220
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:225
undefined jquery.min.js:2:28648

Uncaught TypeError: can't access property "sClass", a is undefined
ne https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4
Fe https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4
Te https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4
We https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4
V https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4
jQuery 2
V https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4
DataTable https://cdn.datatables.net/2.3.6/js/dataTables.min.js:4
<anonymous> https://www.goodnewsbig.com/res/js/admin/admin_dt.js:3
jQuery 13

I am hoping its just me being stupid but I'm not sure where to go next.

Any help would be appreciated, thx Paul +44 7880 528262

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

kthorngren

can't access property "sClass", a is undefined

Guessing you have a mismatch in the number of columns in the thead and tbody. See the HTML requirements for more details. But it's hard to say what the problem is without seeing the page to debug. If you still need help please post a link to your page or test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin