How to re initialize DataTable after re-render / update the component in livewire?

Anonymouse703

Hello guys when I open/close modal or even delete a record in the table the DataTable is not working.... You need to refresh the page first for the DataTable to work again.

This is my whole script... I think the problem is on how I register my table.. Not Sure..

<script>

//Contacts

$(document).ready(function() {
    $('#rolesTable').DataTable({
        "pagingType": "full_numbers",
        stateSave: true
    });
} );

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

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

//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'
        )
    }
    });
});

//

</script>

kthorngren

How are you updating the Datatable?

Maybe this FAQ about using Datatables APIs to update the table will help.

Kevin

Anonymouse703

@kthorngren I'm using Laravel 8 Livewire...

This is how I initialized the DataTable based on your documents

$(document).ready(function() {
    $('#rolesTable').DataTable({
        "pagingType": "full_numbers",
        stateSave: true
    });
} );

but when I call(emit) this function in livewire the DataTable is not working.

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

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

and I don't know how to re-initialize it after calling another function.

colin

You could call the same initialisation code as your first code block, with destroy to re-initialise the table. You could also use retrieve to use the existing initialisation config,

Colin

Anonymouse703

@colin

I tried this but still not working..

<script>

    //Contacts

    // $(document).ready(function() {
    //     $('#roleTable').DataTable();
    // } );

$(document).ready( function() {
initTable();
tableActions();
} );
 
function initTable () {
  return $('#roleTable').dataTable( {
    "scrollY": "200px",
    "paginate": true,
    "retrieve": true,
    "pagingType": "full_numbers",
    stateSave: true
  } );
}
 
function tableActions () {
  var table = initTable();
 
  // perform API operations with `table`
  // ...
}

document.addEventListener("DOMContentLoaded", () => {
    Livewire.hook('component.initialized', (component) => {
        initTable();
    })
    Livewire.hook('message.processed', (message, component) => {
        initTable();
    })
});

    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>

kthorngren

You aren't using Datatables to update the DOM table in the client so it doesn't know about the changes. After you perform the edits and update the client in the table you need to use row().invalidate(), if you can pass the row-selector for the specific row, or rows().invalidate() to have Datatables update its data cache from the updated DOM table.

Kevin

Anonymouse703

@kthorngren do you have sample sir? or can you refactor my script based on your suggestion? If it's okay. Thank you I am just new with this dataTable.