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

Lionin · April 29

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 · April 29

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 · April 29

I did that, but it is still not working

Lionin · April 29

What is a test case?

allan · April 29

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 · April 29

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 · April 29

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 · April 29

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 · April 29

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 · April 29

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 · April 29

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 · April 29

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 · April 29

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 · April 29

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 · April 29

Also post your Datatables initialization code.

Did you meant for datatables.min.js?

allan · April 29

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

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

Allan

allan · April 29

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 · April 29

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 · April 29

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 · April 29

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 · April 29

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 · April 29

So what do I need to do?

kthorngren · April 29

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

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

Kevin

Lionin · April 29

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

Lionin · April 29

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 · April 29

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.

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

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

Replies

Howdy, Stranger!

Categories

DataTables

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

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

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables