Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

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: modal2

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.

like image 641
Susy11 Avatar asked May 12 '14 11:05

Susy11


4 Answers

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?

like image 66
erikt Avatar answered Dec 02 '22 15:12

erikt


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

like image 39
Susy11 Avatar answered Dec 02 '22 14:12

Susy11


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();
    });
}
like image 34
jvdp Avatar answered Dec 02 '22 16:12

jvdp


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

like image 21
iyel Avatar answered Dec 02 '22 15:12

iyel