I’m working on a JavaScript web application that uses DataTables to display a list of instructors. I’m having an issue where the DataTable doesn’t update immediately after adding a new instructor to the underlying data array.
The Problem
When I add a new instructor through a form submission, the underlying data array updates correctly, but the DataTable doesn’t reflect these changes until I manually refresh the page.
Code
I’ve reproduced this issue in both Vue.js and vanilla JavaScript. Here are CodePen links demonstrating the problem:
- Vue version: https://codepen.io/badershs/pen/xxoBXQx
- Vanilla JavaScript version: https://codepen.io/badershs/pen/JjQzreo
What I’ve Tried
- I’ve attempted to destroy and reinitialize the DataTable after adding new data:
updateDataTable() {
if (this.dataTable) {
this.dataTable.destroy();
}
this.$nextTick(() => {
this.dataTable = $('#instructor-table').DataTable();
});
}
- I’ve also tried using
setTimeoutto delay the reinitialization:
updateDataTable() {
if (this.dataTable) {
this.dataTable.destroy();
}
setTimeout(() => {
this.dataTable = $('#instructor-table').DataTable();
}, 0);
}
- I’ve made sure that the underlying data array (
instructors) is updated correctly before callingupdateDataTable().
Expected Behavior
I expect the DataTable to reflect the new data immediately after adding a new instructor, without requiring a page refresh.
Important Notes
- My main goal is to fix this issue in the Vue implementation but I noticed it happened on pure javascript .
- I don’t want solutions that pass the
instructorsarray directly to DataTables. The data should remain managed by Vue v-for.
Question
How can I update the DataTable in my application to reflect new data without requiring a page refresh? Is there a more efficient way to add new rows to a DataTable dynamically while keeping the data management within Vue?
Any help or guidance would be greatly appreciated. Thank you!
4
To solve this issue you must to know Datatable working logic.
Datatable doesn’t support dom change since 2.0.
You can add new data by using Datatable functions. Like sample below.
There is a sample to add datatable row.
Datatables
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();
Or you can destroy datatable and reinitialize it.
I think your solution very simple. I only change the order updateDataTable(); renderInstructors(); in your codepen where it’s inside submitForm function. You must to destroy datatable before update content. After that add new datas you can reinitialize the DataTable.
I’m sorry about my english. I hope I helped.
I edit your function
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();
}
This is without using model:
dataTable.row.add(['dwadwa','dwadwadaw','dawdawdawdaw']).draw()
This is using model:
dataTable.row.add([newInstructor.id,newInstructor.firstName + ' ' + newInstructor.lastName,newInstructor.email]).draw()
Add one of these lines of code in function submitForm(event) its simply adding a row to existing table with passed data in brackets. Because your json is not equal actual table cols u cant just add(newInstructor)