Question

我得到了这种布局，我正在使用DataTables处理数据（分页，排序和搜索）-a small set of use cases

我正在使用AlpineJS来管理这些选项卡实现，并且在第一页重新加载时，一切正常，当我切换到另一个选项卡时，它根本不起作用。我什至尝试使用jQuery数据表，但同样也进行了尝试。

当前，原始的JS数据表可以调用各种事件和选项，但是在我的情况下，它们都不起作用。

JS伙计们，你能帮忙吗？

Answer 1

如果您使用的是Alpine.js v2 +，则此答案会更好，因为我将使用x-init。相当于v1.7之前的版本将执行x-mounted中提到的所有操作。

您应该能够使用new DataTable()（运行初始化/集成）和x-init（因此，接受接受DOM节点（x-ref构造函数支持）的第三方库） Alpine为您提供了要将插件初始化到的DOM节点。

以下代码段使用dataTable（使用DataTable）对元素调用的x-ref="dataTable"构造函数初始化$refs.dataTable实例属性。

<div
  x-data="{}"
  x-init="dataTable = new DataTable($refs.dataTable)"
>
  <table x-ref="dataTable"></table>
</div>

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

<div
  x-data="{}"
  x-init="() => {
    dataTable = new DataTable($refs.dataTable);
    return () => {
      dataTable.destroy();
    }
  }"
>
  <table x-ref="dataTable"></table>
</div>

AlpineJS和Vanilla DataTables的问题

1 个答案: