How do you programmatically reload a jquery datatable? - datatables

Question

I have a jquery datatable on a page that I want to reload after a user action. Also, I do not set the ajax parameter on my datatable because the url is always changing and I need to process the JSON data a bit after I get it.
Here is my code to initially set the datatable.
$.getJSON(uri, function (people) {
// ... code removed for brevity ...
$("#people-table").dataTable({
"data": people,
"columns": [{
"data": "id",
"title": "Id"
}, {
"data": "full_name",
"title": "Name"
}, {
"data": "phone",
"title": "Home Phone"
}, {
"data": "cell_phone",
"title": "Mobile"
}, {
"data": "email",
"title": "Email"
}]
});
How do I reload the table after a user action (like a button click)?

Answer 1

Here is how you do it.
(I would recommend only doing this if you must pre-process the JSON data before setting it into the datatable. If you can use the datatable ajax parameter, that is preferable.)
$.getJSON(uri, function(people) {
// ... code removed for brevity ...
if (if ($.fn.DataTable.isDataTable("#people-table"))) {
var api = $("#people-table").dataTable().api();
api.clear();
people.forEach(function(row, idx) {
api.row.add(row);
});
api.draw();
} else {
$("#people-table").dataTable({
"data": people,
"columns": [
{ "data": "id", "title": "Id" },
{ "data": "full_name", "title": "Name" },
{ "data": "phone", "title": "Home Phone" },
{ "data": "cell_phone", "title": "Mobile" },
{ "data": "email", "title": "Email" }
]
});
}