How to update NG table loaded from HTTP request using dynamic data

Question

I need to update data in my ng table. The following images contain a full use scenario. When the user clicks on the BrandID search, a new modal window appears:

It contains an ng table with some loaded data. After rejecting the modality, I click on the second search (GroupID), here the same modal window opens with an ng table, but even if the request is ok and the data is returned from the server, the download does not work:

I would like to be able to update the table to initialize it with new data.

The script in Plunker is called every time the modal switches.

Answer 1

The solution to the problem can be found here . This is not a good solution, but so far it is better. Choosing a different counter for each request, the table will reload its data, and you will get the desired result. The new Plunk can be found here. Note that for each request it is important to have different counters per page. If the count property is set to the same number, the solution will not be executed. Hope this is clear, and I also hope that the ng-table developers will fix this problem.

Answer 2

Try this to update the table data:

$scope.tableParams.reload(); 

Edit: I found a possible error in your code ... I think you should change this:

 var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : $scope.datay; 

:

 var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData; 

Does this work better?

Answer 3

This code sample works, please check this SO question for a more detailed explanation: ng table does not work for dynamic data

 // Get data from factory var data = dataFactory.query(); //Use promise to load data to table, note the replacing of the second tableParams //object parameter with a function data.$promise.then(function (data){ $scope.tableParams = new ngTableParams({ page: 1, // show first page count: 10, sorting: { name: 'asc' }, filter: { name: undefined } }, resetTableParams() ); }); //The function that replaces the tableParams param var resetTableParams = function(){ return { total: data.length, getData: function($defer, params) { var filteredData = params.filter() ? $filter('filter')(data, params.filter()) : data; var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData; params.total(orderedData.length); $defer.resolve($scope.data = orderedData.slice((params.page() -1) * params.count(), params.page() * params.count())); } } } //A method to update the table that can be called when closing a modal var updateTable = function(){ data = dataFactory.query(); data.$promise.then(function (data){ $scope.tableParams.reload(); }); } // Add table row to table in modal and call updateTable() on closing modal $scope.addRow = function(){ var modalInstance = $modal.open({ templateUrl: 'resources/partials/newrecord.html', controller: NewRecordModalCtrl }) modalInstance.result.then(function(){ updateTable(); }); } 

Answer 4

People, now I support this repo and finally fix the fix in v0.4.2 !