jQuery datatable not refreshing in Angular

Question

I am using jQuery datatables in my AngularJS app. On success of my GET API call, I am setting the result to a scope variable and using a timeout to initialize the datatable.

$scope.successCallbackOfAPI = function(data) {
 $timeout(function() {
 $scope.items = angular.copy(data);
 $("#myDatatable").DataTable();
 }, 200);
};

I have a scenario where I have to call the API again and refresh the datatable with the new data from the API response. In this case, I will be calling the same callback to reinitialize the datatable.

The datatable still hold the previous data before refreshing even though the scope variables are getting updated.

Is there a way to achieve this without using a directive?

• ocket-san: Why are you using timeout for? Is it because $("#myDatatable").DataTable() is asynchronous?
• Jaseem Abbas: Yes. It doesn't initalize otherwise
• Vanojx1: i can suggest you to try angular-datatables. this case seems to be good for you
• Walfrat: Need the html to be able to answer

Answer 1

When I had this problem I created different function to update my table. It had this part of code:

dataTable.clear().draw() 
dataTable.rows.add( NEWDATA );
dataTable.columns.adjust().draw(); 

Hope it helps

Answer 2

// Apply this code before the api call or in the render() function.
var table = $('#table_id').DataTable();
 
table.clear().draw(); // To reset the table