AlpineJS 和香草数据表的问题答案

【问题标题】：Issues with AlpineJS & Vanilla DataTablesAlpineJS 和香草数据表的问题
【发布时间】：2020-07-01 04:56:58
【问题描述】：

我得到了这个布局，我正在使用 DataTables 来处理我的数据（分页、排序和搜索）-https://github.com/fiduswriter/Simple-DataTables

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

目前，vanilla JS 数据表有各种事件和选项可供调用，但在我的情况下它们都不起作用。

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

【问题讨论】：

标签： javascript datatables alpine.js

【解决方案1】：

如果您使用 Alpine.js v2+，这个答案会更好，因为我将使用x-init。与此等效的 pre v1.7 将执行x-mounted 中提到的所有操作。

您应该能够使用x-init（运行初始化/集成）和x-ref（以便 Alpine 为您提供DOM 节点你想初始化插件）。

以下 sn-p 使用 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 钩子的函数并从中返回“卸载”/“销毁”回调来做到这一点（注意：这是 2.x 功能）。

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

【讨论】：