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.

Bhili

if the table is based on model, you don't need to refresh it. Angular does it automatically (ngRepeat has own watchers). Just bind table model with Add new Product form (aka formList.push(createdForm);) – Tancred

@Maxim The table is not based on ng-models. this is the modal window that shows on search, please check the plunker html. The modal windows are not used to add the entire product, they are used just to add some properties to cetain fields of the form – Bhili

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

Bhili

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?

Saw

Hi, the solution does not work because if i reload the table before the initialization with the new data it will give an error of undefined data. – Bhili

Thank you for your answer but it still doesn't solve the issue. I found a workaround that i will post in an answer. – Bhili

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();
    });
}

Undersecretary

Answer 4

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

Senskell

Hi where in this repo is an example or explanation? – Centiare