Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')
Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')
Hi I am currently using datatables in my laravel 10 project called Employee Termination, Offboarding, Survey and Feedback.
I got an error which is the title of the question "[(Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')]", I have been for two days trying to find the problem but I cannot see it.
Furthermore, I have noticed that when I add a row of data in the column, the error showed up, but when there is nothing, it si working just fine as I expected and also, I have never use any rowspan or colspan in the <tbody> tag.
Here is the whole code:
<div class="content">
<!-- Basic datatable -->
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Survey Table</h5>
<a href="{{ route('createsurvey.page') }}" class="btn btn-primary ml-3">
Construct New Survey
</a>
</div>
<table class="table datatable-basic">
<thead>
<tr>
<th>Survey Title</th>
<th>Survey Description</th>
<th class="text-center">Actions</th>
</tr>
</thead>
@foreach($surveys as $survey_column)
<tbody>
<tr>
<td>{{ $survey_column->survey_title }}</td>
<td>{{ $survey_column->survey_description }}</td>
<td class="text-center">
<div class="d-inline-flex">
<div class="dropdown">
<a href="#" class="text-body" data-bs-toggle="dropdown">
<i class="ph-list"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="#" class="dropdown-item">
<i class="ph-eye me-2"></i>
Preview
</a>
<a href="#" class="dropdown-item">
<i class="ph-pencil-line me-2"></i>
Edit
</a>
<a href="#" class="dropdown-item">
<i class="ph-trash me-2"></i>
Delete
</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
@endforeach
</table>
</div>
<!-- /basic datatable -->
</div>
<!-- /content area -->
Replies
Move your
tbody
outside of thefor
loop.Not sure that is the only issue, but it is certainly a issue.
If that doesn't solve it, please link to a test case.
Allan
I did that, but it is still not working
What is a test case?
When you link to an example showing the issue. If you can't give me a link to your page, then use https://live.datatables.net , JSFiddle, CodePen or any other service to create a page showing the issue.
The unrendered code from above has no problem initialising as a DataTable: https://live.datatables.net/jufadoja/1/edit .
Perhaps you can use that page as the basis to create an example showing the problem. "View Source" on your page will probably help you.
Allan
Ohhh, thanks, but why it does work here and mine doesn't?
In other tables it is fine, it is working properly but to that table I shared above does not work.
Does the problem only happen when you add a row?
Update the test case to show how you are adding the row. The error typically means a mismatch in the number of columns in the
thead
and the row data.We will need to see the issue replicated to help debug.
Kevin
Perhaps your rendered HTML is creating new table elements? A "View source" will help you. Without being able to see it, as Kevin says, and I've already noted, we'd need to be able to see the error.
Allan
Yes it does happen, when I delete the whole data in the table in the database, it goes back to normal
Ok. So how are you adding the rows? Can you update Allan's test case to show how adding rows causes the issue?
Kevin
I add a column based on what column that I have in the table of my database, and loop it using the Laravel Blade directive @foreach loop which will loop and display all the data in the table.
It is fine in the test case, https://live.datatables.net/jufadoja/2/ , but in my localhost, it is not working.
As Allan suggested maybe you can view the rendered table using the browser's inspect tool. If you don't find the issue maybe copy the table from the inspect tool into Allan's test case.
Kevin
Also post your Datatables initialization code. If the initiailization code references a column index that doesn't exist you will get an error similar to what you posted.
Kevin
I followed it, and it works just fine, https://live.datatables.net/jufadoja/8/ , try to see it here
Did you meant for datatables.min.js?
No - the code you use to create the DataTable. e.g.
Allan
It if works on the live site, and not your own host, we'd really really need to be able to see your own host. It is impossible to debug a page which is working!
Allan
Here it is:
And how are we going to do that?
Your test case isn't working properly. It has many 404 errors plus this error:
The test case isn't loading the Datatable resources because you are pointing to a local server.
I copied your rendered
table
into Allan's test case and it does work:https://live.datatables.net/jufadoja/9/edit
Please produce the error in your environment. Copy the
table
that produces the error into this last test case. Don't modify the contents. If you don't want the contents posted publicly then PM Allan (click on his name in this thread) with the test case link or PM Allan a link to your page. Possibly the Debugger will provide Allan the info needed to debug. PM Allan the ID generated by the debugger.Kevin
This is a problem:
The table you are generating has 3 columns. This is referencing column index 5 (the 6th column in the table). This will cause the error yuo are seeing.
Kevin
So what do I need to do?
I'm not sure what that column is supposed to be so its hard to say exactly what you should do. The options are:
Kevin
It say the column is 6 but the columns that I had is only three
I used the debugger and it say to update my datatables to latest version.
The version we had use is datatables v1, it is part of a template called Laravel Limitless from Themesbrand. I did update the datatable.min.js to the latest version but it cause a new error too.
Ok I finally made it work, I have turned this
line of code, to this:
Thank you for the help, I really appreciate it.