Question

我的情景： 嘿我维持一个从数据库中检索数据的系统，然后将该数据传递给 vue.js ，然后在 jQuery DataTabes 中显示它。

我遇到的问题是，当 DataTables 最初初始化时，似乎数据保存在我初始化的表中。当我检索新信息时，它不会更新现有数据并且会破坏表格。

从请求中返回的数据也正是我需要的只是 DataTables 给我一个问题

我尝试过的事情：

使用$('#table').DataTable.destroy()销毁该表，然后重新初始化它：要么说不能重新初始化数据表，要么像往常一样只显示旧数据。

使用新ID重新初始化表并将当前表ID更改为数学新ID：只是不工作将表显示为普通表而不是数据表。

我的问题：

如何使用 DataTables 与 vuejs 一起提取新数据而不刷新页面？

或

如何删除并重新初始化数据表？

修改：如果还有其他插件，例如 DataTables ，那么我很想知道它们。

Answer 1

如何使用带有vuejs的DataTables来提取新数据而不刷新页面？

让Datatable完成这项工作并使用其服务器端处理功能： https://datatables.net/examples/data_sources/server_side.html

如果您使用的是 Vue 1.x ，并且您希望操作按钮有效，例如：您在json中返回带有未编译的vue指令的html - 您每次获取新数据时都可以重新编译datatables包装器：

$('#datatable').dataTable({
   ...
    drawCallback: function (settings) {
        var $element = $('#datatable');
        vm.$compile($element.get(0)); // vm refers to Vue instance
    },
 ...
});

注意： Vue 2.x

中已删除 $ compile

Answer 2

对于客户端数据，您可以执行以下操作：

dataTable.clear().draw();
dataTable.rows.add(newDataArray).draw();

（Shameless Plug），我还写了一个包装器插件，可以帮助直接与服务器端集成：https://github.com/niiknow/vue-datatables-net

MIT，因此您可以随意使用它，也可以浏览代码以了解如何在Vue中使用jQuery DataTables。

将jQuery DataTables与vuejs一起使用

2 个答案: