jQuery uses DataTable to reload after deleting data

Problem description:

Tables made using a combination of jQuery, Datatable and artTemplate. However, when deleting data, you need to reload the data in table. However, the problem is that datatable does not directly re-render, but adds data.

Solution:

After looking at the superior blog, it is found that table can be destroyed first, and then rendered again.

var dttable;
App.globalAjax("get", "/Order/MyJsonList", {}, function (result) {
 　  var html = template('Orders-template', result);
  $("#datatable1").find("tbody").html(html);
  dt = $('#datatable1').dataTable({
    "sPaginationType": "bs_full"
  });
});

This is the first time to get the data through ajax, then use artTemplate to render the data, finally fill it into the page, and then render it.

The next step is to perform the delete operation, and then reload the rendering table

App.globalAjax("post", "/Order/DeleteOrder", data, function (result) {
      App.globalAjax("get", "/Order/MyJsonList", {}, function (result) {
        var html = template('Orders-template', result);
        if ($('#datatable1').hasClass('dataTable')) {
          dttable = $('#datatable1').dataTable();
          dttable.fnClearTable(); // Empty 1 Under table
          dttable.fnDestroy(); // Restores the initialized datatable
        }
        $("#datatable1").find("tbody").html(html);
        $('#datatable1').dataTable();
      });
    });

At this point, datatable can be rendered again.