'Datatable js structure not working in livewire

Datatable js structure not working in livewire when I view livewire view without load but it's working when I view livewire with load it's fine.

So how I refresh the js code when I view a livewire view file without load?

For Example

  1. Livewire view with load window - https://ibb.co/QDPJk4j
  2. Livewire view without load window - https://ibb.co/KDqvdc7

$(document).ready(function () {

    $('#tableExample1').DataTable({
        "dom": 't'
    });

    $('#tableExample2').DataTable({
        "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>t<'row'<'col-sm-6'i><'col- 
    sm-6'p>>",
        "lengthMenu": [[6, 25, 50, -1], [6, 25, 50, "All"]],
        "iDisplayLength": 6,
    });

    $('#tableExample3').DataTable({
        dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        buttons: [
            {extend: 'copy', className: 'btn-sm'},
            {extend: 'csv', title: 'ExampleFile', className: 'btn-sm'},
            {extend: 'pdf', title: 'ExampleFile', className: 'btn-sm'},
            {extend: 'print', className: 'btn-sm'}
        ]
    });

    });

I need to reload the js when I view Livewire view file with emit.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source