Question

我想在Laravel + Vue.js项目中创建一个反应式数据表。我正在使用datatables.js库来显示我的数据。当我进行API调用以从db API获取数据时返回一个数组，所以我想在datatable中填充该数组。但它的工作很奇怪？

以下是API调用：

methods: {
    getUsers() {
        axios.get('/api/users')
            .then(response => {
                if(response.status === 200) {
                    this.users = response.data.users;
                    console.log(this.users);
                }
            })
            .catch(error => {
                console.error(error);
            });
    }
},
mounted() {                
    $('#users-datatable-responsive').DataTable();
    this.getUsers();
}

这是我填充datatable

中数据的方式

<tr v-for="user in users">
    <td>@{{ user.fullname }}</td>
    <td>@{{ user.phone }}</td>
    <td>@{{ user.email }}</td>
</tr>

这是奇怪的结果：

数据表的搜索和其他功能无效。什么是解决方法？

编辑：

mounted() {               
    let table = $('#users-datatable-responsive').DataTable({
        language: this.dataTableOptions
    });
    this.getUsers();
    table.rows().invalidate().draw();
}

这种方法对我不起作用。

Answer 1

如果它是一个简单的表，您可以使用vue docs中的此网格表组件 https://vuejs.org/v2/examples/grid-component.html

Answer 2

根据我的评论，有两个问题导致您遇到的问题：

更新DOM时，DataTable插件不会自动更新其内部缓存。您需要使用其API来重置＆＃39;表格，即table.rows().invalidate().draw();
Axios异步工作，只有在解析了promise后才能重置表。理想情况下，这应该使用自定义方法来保持抽象:)
- 在自定义方法中，必须等待VueJS完成DOM的更新，因为DOM依赖迭代this.users来呈现正确的标记。使用Vue.nextTick()调用“重置”的逻辑＆＃39;桌子。

要解决此问题，您可以在app / component中调用一个自定义方法来处理表的强制刷新，即：

methods: {
    getUsers() {
        axios.get('/api/users')
            .then(response => {
                if(response.status === 200) {
                    // Populate VueJS data store with received data
                    this.users = response.data.users;

                    // Call a method that manually refreshes table
                    this.forceRefreshUserDataTable();
                }
            })
            .catch(error => {
                console.error(error);
            });
    }
},
mounted() {             
    this.usersDataTable = $('#users-datatable-responsive').DataTable();
    this.getUsers();
},
methods: {
    forceRefreshUserDataTable() {
        Vue.nextTick(function () {
            this.usersDataTable.rows().invalidate().draw();
        });
    }
}

Answer 3

我无法得到Terry的工作答案，但经过一段时间的游戏后发现在渲染之前破坏了表格，然后在下一个刻度上重建表格确实有效。

...
methods: {
        drawDT() {
          $("#dt").DataTable().draw();
        },
        async refreshData() {
          this.isLoading = true;
          $("#dt").DataTable().destroy();
          try {
            let data = await fetchData();
            this.users = data.slice(0, getRandomInt(1, data.length));
            await this.$nextTick(this.drawDT);
          } catch (err) {
            console.error(err);
          } finally {
            this.isLoading = false;
          }
        }
      },
...

Full example here

如何在Vue.js2项目中使用datatables.js？

3 个答案: