Answers

• kthorngren Posts: 21,337Questions: 26Answers: 4,954

  September 2021

  How are you updating the Datatable?

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

  Kevin
• Anonymouse703 Posts: 18Questions: 8Answers: 0

  September 2021

  @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 Posts: 15,240Questions: 1Answers: 2,599

  September 2021

  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 Posts: 18Questions: 8Answers: 0

  October 2021

  @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 Posts: 21,337Questions: 26Answers: 4,954

  October 2021

  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 Posts: 18Questions: 8Answers: 0

  October 2021

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