当我在文档就绪中调用另一个函数时，jQuery Datatable 功能不起作用

Question

大家好，当我调用另一个函数（打开模式或删除）时，DataTable 不起作用。

这是我的整个脚本。

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

我尝试放置另一个文档。准备就绪，但现在仍在工作。

Answer 1

如果您使用 dispatchBrowserEvent 将事件从组件调度到前端

//component
   $this->dispatchBrowserEvent('closeRoleModal');
   // or
   $this->dispatchBrowserEvent('openRoleModal');

//blade
window.addEventListener('closeRoleModal', event => {
    $('#roleModal').modal('hide');
});

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