How to refresh NG-Table loaded from an http request with dynamic data

Question

I need to be able to refresh the data in my ng-table. The following images contain the full use case scenario. When a user clicks the search for BrandID, a new modal window apears:

It contains an ng-table with some loaded data into it. After the modal is dismissed I click on the second search(GroupID), here the same modal window with an ng-table is opened but even if the request is ok and data is returned from the server, the loading fails:

I would like to be able to refresh the table in order to initialize it with the newly received data.

The script in the Plunker is called each time the modal toggles.

Answer 1

The solution to the issue can be found here. It's not a good solution but for now it's the best. By forcing a different count for each request the table will reload it's data and you will obtain the desired result. The new Plunk can be found here Please note the importance of having a different count per page for each request. If the count property is set to the same number the solution will fail. I hope that this makes it clear, and i also hope that the developers of ng-table will fix this issue

Answer 2

Try this to update table data:

$scope.tableParams.reload();

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

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

to this:

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

Does that work better?

Answer 3

This code example seems to work, please check this SO question for more explanation: ng-table not working 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

Folks, now I support this repo and finally issue fixed in v0.4.2!