在 JavaScript 应用程序中添加新行后数据表未更新

Question

我正在开发一个 JavaScript Web 应用程序，它使用 DataTables 来显示教师列表。我遇到一个问题，即向基础数据数组添加新讲师后，数据表不会立即更新。

问题

当我通过表单提交添加新讲师时，底层数据数组会正确更新，但数据表不会反映这些更改，直到我手动刷新页面。

代码

我已经在 Vue.js 和 vanilla JavaScript 中重现了这个问题。以下是演示该问题的 CodePen 链接：

• Vue版本：https://codepen.io/badershs/pen/xxoBXQx
• Vanilla JavaScript 版本：https://codepen.io/badershs/pen/JjQzreo

我尝试过的事情

1. 我尝试在添加新数据后销毁并重新初始化数据表：

updateDataTable() {
    if (this.dataTable) {
        this.dataTable.destroy();
    }
    this.$nextTick(() => {
        this.dataTable = $('#instructor-table').DataTable();
    });
}

2. 我还尝试使用

   setTimeout

   来延迟重新初始化：

updateDataTable() {
    if (this.dataTable) {
        this.dataTable.destroy();
    }
    setTimeout(() => {
        this.dataTable = $('#instructor-table').DataTable();
    }, 0);
}

3. 在调用

   instructors

   之前，我已确保基础数据数组 (

   updateDataTable()

   ) 已正确更新。

预期行为

我希望数据表在添加新讲师后立即反映新数据，而不需要刷新页面。

重要注意事项

1. 我的主要目标是在 Vue 实现中解决这个问题，但我注意到它发生在纯 javascript 上。
2. 我不想要将

   instructors

   数组直接传递到 DataTables 的解决方案。数据应继续由 Vue v-for 管理。

问题

如何更新应用程序中的数据表以反映新数据，而无需刷新页面？有没有更有效的方法来动态添加新行到 DataTable，同时将数据管理保留在 Vue 中？

任何帮助或指导将不胜感激。谢谢！

Answer 1

要解决这个问题你必须了解Datatable的工作逻辑。 从2.0开始，Datatable不支持dom更改。 您可以使用数据表函数添加新数据。就像下面的示例一样。 有一个添加数据表行的示例。 [https://datatables.net/examples/api/add_row.html][1]

var table = new DataTable('#myTable');
 
table.row
    .add({
        name: 'Tiger Nixon',
        position: 'System Architect',
        salary: '$3,120',
        start_date: '2011/04/25',
        office: 'Edinburgh',
        extn: '5421'
    })
    .draw();

或者您可以销毁数据表并重新初始化它。 我认为你的解决方案非常简单。我只改变顺序 updateDataTable();渲染指令（）；在你的codepen中，它位于submitForm函数内。更新内容之前必须先销毁数据表。添加新数据后，您可以重新初始化数据表。

我对我的英语感到抱歉。我希望我有所帮助。 我编辑你的函数

function submitForm(event) {
        event.preventDefault();
        const newInstructor = {
            id: instructors.length + 1,
            firstName: document.getElementById('firstName').value,
            lastName: document.getElementById('lastName').value,
            email: document.getElementById('email').value
        };
        instructors.push(newInstructor);
        hideModal();
        updateDataTable();
        renderInstructors();
    }

Answer 2

这是没有使用模型的情况：

dataTable.row.add(['dwadwa','dwadwadaw','dawdawdawdaw']).draw()

这是使用模型：

dataTable.row.add([newInstructor.id,newInstructor.firstName + ' ' + newInstructor.lastName,newInstructor.email]).draw()

在函数submitForm(event)中添加这些代码行之一，只需将一行添加到现有表中，并在括号中传递数据。因为你的 json 不等于实际的表列，所以你不能只添加（newInstructor）