Javascript 与AlpineJS&；普通数据表

我得到了这个布局，我正在使用数据表来处理我的数据（分页、排序和搜索）——

我使用AlpineJS来管理这些选项卡的实现，在第一个页面重新加载时，一切正常&当我切换到另一个选项卡时，它根本不工作。我甚至用jquerydatatables进行了尝试，但同样的事情也出现了

目前，vanilla JS datatables可以调用各种事件和选项，但在我的例子中，它们都不起作用

---

JS伙计们，你们能帮忙吗？

如果你们使用Alpine.JS v2+，这个答案会更好，因为我将使用

x-init

。v1.7之前的版本与此相当，它将完成

x-mounted

中提到的所有操作

您应该能够使用

x-init

（运行初始化/集成）和

x-ref

（以便Alpine为您提供要初始化插件的DOM节点）集成接受DOM节点（新DataTable（）构造函数支持）的第三方库

下面的代码段使用在元素上调用的

x-ref=“dataTable”

（使用

$refs.dataTable

）构造函数初始化

dataTable

实例属性

原则上，当Alpine组件/应用程序卸载时，还应该删除DataTable实例。您可以通过为x-init钩子使用一个函数并从中返回一个“unmount”/“destroy”回调来实现这一点（注意：这是一个2.x特性）