DataTable not updating after adding new row in JavaScript application

Question

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

1. 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();
    });
}

2. I've also tried using setTimeout to delay the reinitialization:

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

3. I've made sure that the underlying data array (instructors) is updated correctly before calling updateDataTable().

Expected Behavior

I expect the DataTable to reflect the new data immediately after adding a new instructor, without requiring a page refresh.

Important Notes

1. My main goal is to fix this issue in the Vue implementation but I noticed it happened on pure javascript .
2. I don't want solutions that pass the instructors array 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!

Answer 1

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();
}

Answer 2

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)