DataTables warning: table id=roleTable - Cannot reinitialise DataTable.

Anonymouse703

I have this script in livewire and I want to reinitialize the DataTable every time I call a function. but I got this error DataTables warning: table id=roleTable - Cannot reinitialise DataTable.

This is my whole script

<script>

    $(document).ready(function() {
        if ( ! $.fn.DataTable.isDataTable( '#roleTable' ) ) {
            $('#roleTable').dataTable({
                 "scrollY": "200px",
                 "paginate": true,
                 "paging": false,
                 "searching": false,
                 "pagingType": "full_numbers",
            });
        }
    } );

    function initTable () {
        return $('#roleTable').dataTable( {
            "scrollY": "200px",
            "paginate": true,
            "paging": false,
            "searching": false,
            "pagingType": "full_numbers",
        } );
    }

    window.livewire.on('closeRoleModal', () => {
        $('#roleModal').modal('hide');
        initTable();
    });

    window.livewire.on('openRoleModal', () => {
        $('#roleModal').modal('show');
        initTable();
    });

    window.livewire.on('closeSetRoleModal', () => {
        $('#setRoleModal').modal('hide');
        initTable();
    });

    window.livewire.on('openSetRoleModal', () => {
        $('#setRoleModal').modal('show');
        initTable();
    });

    //delete contact
    window.addEventListener('swal:confirmRoleDelete', 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('deleteRole',event.detail.id)
            swal.fire(
            'Deleted!',
            'Your file has been deleted.',
            'success'
            )
            initTable();
        }else{
            initTable();
        }
        });
    });

    //

</script>

colin

You're calling initTable() in many places, so the table probably is being reinitialised as the error says. A quick fix would be within initTable() test whether the table has been initialised previously with DataTable.isDataTable(),

Colin

colin

Something like:

function initTable() {
    if (DataTable.isDataTable($('#roleTable'))) {
        return $('#roleTable').DataTable()
    } else {
        return $('#roleTable').dataTable({
            "scrollY": "200px",
            "paginate": true,
            "paging": false,
            "searching": false,
            "pagingType": "full_numbers",
        });
    }
}

Colin