Got two errors : Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')..

Anonymouse703

I got two errors:

1. Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')
2. main.js:54 Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')

and two questions:
1. When I click a menu the DataTable property is not working.
2. If you store your first data, you still need to refresh the page for the DataTable property will be working, but if you already refresh the page and store second data and or other data the dataTable is working.

my JS

<script >

    $(document).ready(function() {
        if ( $.fn.dataTable.isDataTable( '#permissionTable' ) ) {
            table = $('#permissionTable').DataTable();
        }
        else {
            table = $('#permissionTable').DataTable( {
                paging: false
            } );
        }
    } );


    document.addEventListener("DOMContentLoaded", () => {

        $('#permissionTable').DataTable({
            "pagingType": "full_numbers",
            stateSave: true
        });

        Livewire.hook('element.updated', (el, component) => {
            $("#permissionTable").DataTable().destroy();
            $('#permissionTable').DataTable({
                responsive: true,
                paging : true,
                destroy : true, 
                scrollY: 300,
            });
        })
    });

    window.livewire.on('closePermissionModal', () => {
        $('#permissionModal').modal('hide');
        var table = $('#permissionTable').DataTable({
            responsive: true,
            paging : true,
            destroy : true, 
            scrollY: 300,
        });
    });

    window.livewire.on('openPermissionModal', () => {
        $('#permissionModal').modal('show');
        $("#permissionTable").DataTable().clear().destroy();
    });

    window.addEventListener('swal:confirmPermissionDelete', event => {
        swal.fire({
            title: event.detail.title,
            text: event.detail.text,
            icon: event.detail.icon,
            showCancelButton: event.detail.showCancelButton,
            confirmButtonColor: event.detail.confirmButtonColor,
            cancelButtonColor: event.detail.cancelButtonColor,
            confirmButtonText: event.detail.confirmButtonText,
        }).then((result) => {
        if (result.isConfirmed) {
            window.livewire.emit('deletePermission',event.detail.id)
            swal.fire(
            'Deleted!',
            'Your file has been deleted.',
            'success'
            )
        }
        });
    });

</script>

my html

<div>
    <div class="row">
        <div class="col-xs-12">
            <livewire:flash-message.flash-messages />
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">Permissions</h3>
                </div>

                <!--Data Table-->
                <!--===================================================-->
                <div class="panel-body">
                    <div class="pad-btm form-inline">
                        <div class="row">
                            <div class="col-sm-6 table-toolbar-left">
                                <button class="btn btn-purple" wire:click="createPermission"><i class="demo-pli-add icon-fw"></i>Add</button>
                                <!-- <button class="btn btn-default"><i class="demo-pli-printer icon-lg"></i></button> -->
                            </div>
                        </div>
                    </div>
                    <div wire:key="permissions" class="table-responsive">
                        <table id="permissionTable" class="table table-striped table-bordered table-hover table-fixed" cellspacing="0" width="100%"> 
                            <thead>
                                <tr>
                                    <th>Permission</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($permissions as $data)
                                <tr>
                                    <td>{{$data->name}}</td>
                                    <td class="text-center align-middle">
                                        <div class="btn-group">

                                            <button wire:click="editPermission({{ $data->id }})" class="btn btn-info delete-header m-1 btn-sm"  title="Edit"><i class="fa fa-pencil" aria-hidden="true"></i></button>

                                            <button wire:click="deleteConfirmPermission({{ $data->id }})" class="btn btn-danger delete-header m-1 btn-sm"  title="Delete"><i class="fa fa-trash-o" aria-hidden="true"></i></button>

                                        </div>                
                                    </td>
                                </tr>
                            
                                @empty
                                    <tr>
                                        <td style="text-align:center" colspan="2">No Record Found</td>
                                    </tr>
                                @endforelse   
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--===================================================-->
                <!--End Data Table-->

            </div>
            <!-- The Modal -->
            <div wire.ignore.self class="modal fade" id="permissionModal" tabindex="-1" role="dialog" aria-labelledby="permissionModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog" role="document">
                    <livewire:auth.permission-form />
                </div>
            </div>
        </div>
    </div>
</div>
@section('custom_script')
    @include('layouts.scripts.permission-scripts'); 
@endsection

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

Those errors are generally due to issues with the HTML table. Line 46, the colspan, is not supported by Datatables in the tbody as mentioned in the HTML docs. If you still have issues please provide the test case Colin asked for.

Kevin

Anonymouse703

@kthorngren I just. erase the forelse and replace it with foreach