CODEWITHSUNDEEP
jqueryangularjsdatatable
Jaseem Abbas
Jaseem Abbas

Reputation: 5230

jQuery datatable not refreshing in Angular

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?

Upvotes: 1

Views: 1039

Answers (2)

ENJOYAL
ENJOYAL

Reputation: 1

// Apply this code before the api call or in the render() function.

var table = $('#table_id').DataTable();
 
table.clear().draw();  // To reset the table

Upvotes: 0

Przemek
Przemek

Reputation: 803

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

Upvotes: 1

Related Questions