jquery - 在 vuejs 中使用 jQuery 数据表

Question

我的场景: 嘿，我正在维护一个系统，该系统从数据库中检索数据，然后将该数据传递给 vue.js，然后将其显示在 jQuery DataTabes 中。

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

此外，从请求返回的数据正是我所需要的，只是 DataTables 给我出了问题

我尝试过的:

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

使用新 ID 重新初始化表并更改当前表 ID 以计算新 ID:只是不起作用将表显示为普通表而不是数据表。

我的问题:

如何在 vuejs 中使用 DataTables 来拉取 NEW 数据而不刷新页面？

或

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

编辑:如果有任何其他插件，例如DataTables，那么我很想了解它们。

Answer 1

How do i use DataTables with vuejs to pull NEW data without refreshing the page?

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

如果你正在使用 Vue 1.x 并且你希望你的 action buttons 工作，例如:你在你的 json 中返回一个带有未编译的 vue 指令的 html - 你每次获取新数据时都可以重新编译数据表包装器:

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

注意:$compile 已在 Vue 2.x

中移除