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

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

LioninLionin Posts: 14Questions: 0Answers: 0

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

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    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

  • LioninLionin Posts: 14Questions: 0Answers: 0

    I did that, but it is still not working :'( :'( :'(

  • LioninLionin Posts: 14Questions: 0Answers: 0
    edited April 29

    What is a test case?

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    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

  • LioninLionin Posts: 14Questions: 0Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    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

  • LioninLionin Posts: 14Questions: 0Answers: 0
    edited 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

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

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

    Kevin

  • LioninLionin Posts: 14Questions: 0Answers: 0
    edited 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.

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932
    edited 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

  • LioninLionin Posts: 14Questions: 0Answers: 0

    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

  • LioninLionin Posts: 14Questions: 0Answers: 0

    Also post your Datatables initialization code.

    Did you meant for datatables.min.js?

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

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

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

    Allan

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    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

  • LioninLionin Posts: 14Questions: 0Answers: 0

    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();
    });
    
  • LioninLionin Posts: 14Questions: 0Answers: 0

    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?

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

  • LioninLionin Posts: 14Questions: 0Answers: 0

    So what do I need to do?

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

  • LioninLionin Posts: 14Questions: 0Answers: 0

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

  • LioninLionin Posts: 14Questions: 0Answers: 0

    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.

  • LioninLionin Posts: 14Questions: 0Answers: 0
    edited 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.

Sign In or Register to comment.