jQuery uses DataTable to implement the reload function after deleting data

Problem description:

A form made using a combination of jQuery Datatable and artTemplate. However, when deleting data, the data in the table needs to be reloaded. But the problem is that datatable does not re-render directly, but instead adds data to the cumulative data.

Solution:

After checking the master's blog, I found that the table can be destroyed first and then re-rendered.

var dttable;
("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 that the data is obtained through ajax, then the data is rendered using artTemplate, and finally filled into the page, and then rendered.

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

("post", "/Order/DeleteOrder", data, function (result) {
      ("get", "/Order/MyJsonList", {}, function (result) {
        var html = template('Orders-template', result);
        if ($('#datatable1').hasClass('dataTable')) {
          dttable = $('#datatable1').dataTable();
          (); //Clear the table          (); //Restore the initialized datatable        }
        $("#datatable1").find("tbody").html(html);
        $('#datatable1').dataTable();
      });
    });

At this point, the datatable can be re-rendered.

The above is what the editor introduced to you. jQuery uses DataTable to implement the reload function after deleting data. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!