How to reload data in existing dataTable()?

Question

I have table that is already displayed on the screen. If user added new row or edit existing row then new set of data will be returned with the ajax. Once data is retrieved I want to clear the existing records from tbody and refresh/reload dataTable . Here is example of my code:

var statusData = {
  479664: {
    "author": "JH2423",
    "up_to": "09/30/2017",
    "status": "Closed",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Slow",
    "status_id": "479664"
  },
  479665: {
    "author": "KK2342",
    "up_to": "09/30/2017",
    "status": "Approved",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Close",
    "status_id": "479664"
  },
  479666: {
    "author": "DD7822",
    "up_to": "09/30/2017",
    "status": "Close",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Process",
    "status_id": "479666"
  },
  479667: {
    "author": "YU8343",
    "up_to": "09/30/2017",
    "status": "Declined",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Warrning",
    "status_id": "479667"
  },
  479668: {
    "author": "MMSD3",
    "up_to": "09/30/2017",
    "status": "Participating",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Approved",
    "status_id": "479668"
  }
};

buildDataTable('tbl-status', false, 2, false, true, true, []);

function buildDataTable(tblID, lengthChange, pageLen, searchBar, infoSection, pagingInfo, arrOrder) {
  var table = $("#" + tblID),
    arrSort = [];

  if (arrOrder.length) {
    arrSort.push(arrOrder); // arrOrder example: [1, "desc"] or [4, "asc"]. First element is column (first col starts from 0) and second is order by direction.
  }

  $(table).DataTable({
    lengthChange: lengthChange,
    pageLength: pageLen,
    lengthMenu: [
      [10, 15, 20, 25, 50, -1],
      [10, 15, 20, 25, 50, "All"]
    ],
    order: arrSort,
    searching: searchBar,
    info: infoSection,
    paging: pagingInfo
  });
}

$("#load").on("click", function() {
  var container = $("#status-container"), // Clear out existing table.
    table = $("").addClass("table").prop("id", "tbl-status"),
    thead = $(""),
    tbody = $("");

  if ($.isEmptyObject(statusData)) {
    var tr = $('');
    tbody.append(tr);
  } else {
    for (key in statusData) {
      var btnName = statusData[key].current == true ? "Change" : "Edit";
      var tr = $('');
      tbody.append(tr);
      tr.append($(''));
    }
  }
  
  $("#tbl-agency-status").remove(); // Remove existing table.
  table.append([thead, tbody]);
  container.append(table);
});










  
    Status
  
  
    
      
Reason As Of Up To Author Date Status Status
No records were found.
').text(statusData[key].reason));
      tr.append($(' ').text(statusData[key].as_of));
      tr.append($(' ').text(statusData[key].up_to));
      tr.append($(' ').text(statusData[key].author));
      tr.append($(' ').text(statusData[key].date));
      tr.append($(' ').text(statusData[key].status));
      tr.append($(' 

        
          
            Reason
            As Of
            Up To
            Author
            Date
            Status
            Status
          
        
        
          
            Failure
            09/11/2019
            10/31/2019
            System
            10/01/2019
            Conditional
            
          
          
            Initial
            06/12/2017
            09/30/2017
            MM434
            06/23/2017
            Participating
            
          
          
            Reporting
            07/11/2019
            08/31/2019
            System
            10/01/2019
            Testing







For some reason current data is not removed. I would like to remove all existing data and reload new data in the table. If anyone have suggestion please let me know.

Aaron · Accepted Answer

Your ajax url will need to return data as JSON format with an array of objects:

[
  {
    "author": "KK2342",
    "up_to": "09/30/2017",
    "status": "Approved",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Close",
    "status_id": "479664"
  },
  {
    "author": "DD7822",
    "up_to": "09/30/2017",
    "status": "Close",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Process",
    "status_id": "479666"
  }
]

To get started create a file named testing.json with the above contents. Then replace table_1 ajax-url from above example to '/your_folder_path/testing.json'. This datatable should now load.

To get access to the data all you need to do is call:

table_1.data(); // datatables object
//OR
table_1.data().toArray(); // a simple array of objects with each rows data you can loop through

Docs on manipulating data for every row can be found here: https://datatables.net/reference/api/row().data()

After data has been modified you can table_1.draw() or table_1.reload() as @NawedKahn suggested - depending on your use case.

Tons of useful functionality can be found in Docs below

Everything you can do with datatables objects: https://datatables.net/reference/api/

All datatables options: https://datatables.net/reference/option/

Browse through these links before you try to build any sort of functionality, it probably already exists.

How to reload data in existing dataTable()?

Answers (1)

Related Questions