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

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

Anonymouse703Anonymouse703 Posts: 17Questions: 7Answers: 0

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>

Answers

  • kthorngrenkthorngren Posts: 14,122Questions: 25Answers: 3,329

    How are you updating the Datatable?

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

    Kevin

  • Anonymouse703Anonymouse703 Posts: 17Questions: 7Answers: 0

    @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.

  • colincolin Posts: 12,911Questions: 0Answers: 2,200

    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

  • Anonymouse703Anonymouse703 Posts: 17Questions: 7Answers: 0

    @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>
    
  • kthorngrenkthorngren Posts: 14,122Questions: 25Answers: 3,329

    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

  • Anonymouse703Anonymouse703 Posts: 17Questions: 7Answers: 0

    @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.

Sign In or Register to comment.