Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')

Lionin

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

allan

Move your tbody outside of the for 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

Lionin

I did that, but it is still not working

Lionin

What is a test case?

allan

What is 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

Lionin

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.

kthorngren

I have noticed that when I add a row of data in the column, the error showed up,

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

allan

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

Lionin

Does the problem only happen when you add a row?

Yes it does happen, when I delete the whole data in the table in the database, it goes back to normal

kthorngren

Ok. So how are you adding the rows? Can you update Allan's test case to show how adding rows causes the issue?

Kevin

Lionin

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.

kthorngren

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

kthorngren

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

Lionin

As Allan suggested maybe you can view the rendered table using the browser's inspect tool.

I followed it, and it works just fine, https://live.datatables.net/jufadoja/8/ , try to see it here

Lionin

Also post your Datatables initialization code.

Did you meant for datatables.min.js?

allan

No - the code you use to create the DataTable. e.g.

new DataTable('#example', {
    info: false,
    ordering: false,
    paging: false
});

Allan

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

Lionin

Here it is:

const DatatableBasic = function() {


    //
    // Setup module components
    //

    // Basic Datatable examples
    const _componentDatatableBasic = function() {
        if (!$().DataTable) {
            console.warn('Warning - datatables.min.js is not loaded.');
            return;
        }

        // Setting datatable defaults
        $.extend( $.fn.dataTable.defaults, {
            autoWidth: false,
            columnDefs: [{ 
                orderable: false,
                width: 100,
                targets: [ 5 ]
            }],
            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
            language: {
                search: '<span class="me-3">Filter:</span> <div class="form-control-feedback form-control-feedback-end flex-fill">_INPUT_<div class="form-control-feedback-icon"><i class="ph-magnifying-glass opacity-50"></i></div></div>',
                searchPlaceholder: 'Type to filter...',
                lengthMenu: '<span class="me-3">Show:</span> _MENU_',
                paginate: { 'first': 'First', 'last': 'Last', 'next': document.dir == "rtl" ? '&larr;' : '&rarr;', 'previous': document.dir == "rtl" ? '&rarr;' : '&larr;' }
            }
        });

        // Basic datatable
        $('.datatable-basic').DataTable();

        // Alternative pagination
        $('.datatable-pagination').DataTable({
            pagingType: "simple",
            language: {
                paginate: {'next': document.dir == "rtl" ? 'Next &larr;' : 'Next &rarr;', 'previous': document.dir == "rtl" ? '&rarr; Prev' : '&larr; Prev'}
            }
        });

        // Datatable with saving state
        $('.datatable-save-state').DataTable({
            stateSave: true
        });

        // Scrollable datatable
        const table = $('.datatable-scroll-y').DataTable({
            autoWidth: true,
            scrollY: 300
        });

        // Resize scrollable table when sidebar width changes
        $('.sidebar-control').on('click', function() {
            table.columns.adjust().draw();
        });
    };


    //
    // Return objects assigned to module
    //

    return {
        init: function() {
            _componentDatatableBasic();
        }
    }
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
    DatatableBasic.init();
});

Lionin

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!

And how are we going to do that?

kthorngren

Your test case isn't working properly. It has many 404 errors plus this error:

Uncaught ReferenceError: DataTable is not defined

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

kthorngren

This is a problem:

            columnDefs: [{
                orderable: false,
                width: 100,
                targets: [ 5 ]
            }],

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

Lionin

So what do I need to do?

kthorngren

I'm not sure what that column is supposed to be so its hard to say exactly what you should do. The options are:

1. Remove that config
2. Change the index to a more appropriate column.

Kevin

Lionin

It say the column is 6 but the columns that I had is only three

Lionin

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.

Lionin

Ok I finally made it work, I have turned this

columnDefs: [{
    orderable: false,
    width: 100,
    targets: [ 5 ]
}],

line of code, to this:

            columnDefs: [{ 
                orderable: false,
                width: 100,
                targets: [ 0 ]
            }],

Thank you for the help, I really appreciate it.