jQuery - Add row to datatable without reloading/refreshing

Question

I'm trying add data to DB and show these data in same page using ajax and jQuery datatable without reloading or refreshing page. My code is saving and retrieving data to/from database. But updated data list is not showing in datatable without typing in search box or clicking on table header. Facing same problem while loading page.

Here is my code

//show data page onload              
$(document).ready(function() {
   catTable = $('#cat_table').DataTable( {
      columns: [
        { title: "Name" },
        { title: "Level" },
        { title: "Create Date" },
        { title: "Status" }
      ]
    });
    get_cat_list(); 
 });

//save new entry and refresh data list
$.ajax({
    url: 'category_save.php',
    type: 'POST',
    data:{name: name,level: level},
    success: function (data) {
       get_cat_list();
    },
    error: function (data) {
       alert(data);
    }
 });

//function to retrieve data from database
function get_cat_list() {
   catTable.clear();
   $.ajax({
      url: 'get_category_list.php',
      dataType: 'JSON',
      success: function (data) {
         $.each(data, function() {
            catTable.row.add([
                this.name,
                this.level,
                this.create_date,
                this.status
            ] );
         });
      }
   });
}

Answer 1

The solution is here - for DataTable server side data source enabled

.draw() will cause your entire datatable to reload, say you set it to show 100 rows, after called .row().add().draw() > datatable will reload the 100 rows again from the server

I wasted an hour trying to find any solution for this very old question, even on DataTable official support there is no good solution suggested ...

My solution is

1- call .row().add()

2- do not call .draw()

3- your row must have an Id identifier to use it as a selector (check the rowId setting of the datatable)

4- after calling .row().add(), the datatable will have the row added to it's local data

5- we need to get this row from datatable object and transform it to HTML using the builtin method .node()

6- we gonna prepend the result HTML to the table :)

All that can be done in two lines of code

var rowData = someRowCreatedByAnAjaxRequest;
myDataTableObject.row.add(rowData);
$("#myTable-dt tbody").prepend(myDataTableObject.row(`tr#${rowData.Id}`).node().outerHTML)

Thanks ☺

Answer 2

From the documentation ,

This method will add the data to the table internally, but does not visually update the tables display to account for this new data.

In order to have the table's display updated, use the draw() method, which can be called simply as a chained method of the row.add() method's returned object.

So you success method would look something like this,

$.each(data, function() {
   catTable.row.add([
        this.name,
        this.level,
        this.create_date,
        this.status
   ]).draw();
});