调用document ready中其他函数时jQuery Datatable功能失效问题求助

问题原因 #

你使用Livewire框架开发时，打开模态框、执行删除这类操作会触发Livewire组件重新渲染对应区域的DOM，你在document.ready中初始化的DataTable实例仅会在页面首次加载时执行一次，DOM被替换后原有实例就会失效，单独新增document.ready事件不会生效。

解决方案 #

1. 抽离DataTable初始化逻辑为公共函数，初始化前先销毁已存在的实例，避免重复初始化报错
2. 除页面首次加载外，额外监听Livewire的DOM更新完成事件，每次DOM更新后重新初始化DataTable

修正后的完整代码 #

<script>
// 抽离DataTable初始化逻辑
function initRolesDataTable() {
    // 先销毁已存在的实例
    if ($.fn.DataTable.isDataTable('#rolesTable')) {
        $('#rolesTable').DataTable().destroy();
    }
    // 初始化DataTable
    $('#rolesTable').DataTable({
        "pagingType": "full_numbers",
        stateSave: true
    });
}

$(document).ready(function() {
    initRolesDataTable();
});

// 监听Livewire更新完成事件，DOM刷新后重新初始化
// Livewire 2版本使用以下事件
document.addEventListener('livewire:load', () => {
    initRolesDataTable();
});
document.addEventListener('livewire:updated', () => {
    initRolesDataTable();
});
// 如果你使用的是Livewire 3，替换为下面的事件即可
// document.addEventListener('livewire:rendered', () => {
//     initRolesDataTable();
// });

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>

内容的提问来源于stack exchange，提问作者Anonymouse703