ngTable: My table is not refresh after $http.get

Question

I am using ngTable to display data from server. When i load data for the first time, ngTable is created with data form server. But when a fetch data second time with others search criterias. The ngTable is not refresh at this time even if data are retrieved. I have to click on pagination to get data refresh.

 <div class="row custom-margin" ng-controller="ListCtlr" ng-init="initData()">
   <form class="form-inline" role="form" id="formId" name="formId">
    <div class="form-group">
     <label for="searchInput">Data to search</label>
     <input ng-model="searchInput" placeholder="Enter term to search">
    </div>
    <button type="submitSearch" class="btn btn-primary" ng-click="search()">Go</button>
   </form>


     <table ng-table="tableParams" class="table ng-table-responsive">
          <thead>
                <tr class="info">
                    <th class="centertext">Name</th>
                    <th class="centertext">Age</th>
               </tr>
          </thead>
          <tbody>
             <tr ng-repeat="person in $data">
               <td data-title="'Name'">{{person.name}}</td>
               <td data-title="'Age'">{{person.age}}</td>
             </tr>
          </tbody>
    </table>
<script type="text/ng-template" id="custom/pager">
            <ul class="pager ng-cloak">
              <li ng-repeat="page in pages"
                    ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"
                    ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
                <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>
                <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>
              </li>
                <li> 
                <div class="btn-group">
                    <button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>
                    <button type="button" ng-class="{'active':params.count() == 25}" ng-click="params.count(25)" class="btn btn-default">25</button>
                    <button type="button" ng-class="{'active':params.count() == 50}" ng-click="params.count(50)" class="btn btn-default">50</button>
                    <button type="button" ng-class="{'active':params.count() == 100}" ng-click="params.count(100)" class="btn btn-default">100</button>
                </div>
                </li>
            </ul>
        </script>
  </div>

This is the controller:

function ListCtlr($scope, $http, $location,$filter,ngTableParams) {

    $scope.formId = {searchInput: ''};

    $scope.search = function () {
        var url='server/search/'+this.searchInput;

        $http.get(url)
            .success(function (data) {
                $scope.persons = data;
                $scope.tableParams = new ngTableParams({
                    page: 1,            // show first page
                    count: 10           // count per page
                }, {
                    total: data.length, // length of data
                    getData: function($defer, params) {
                        $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                });

            })
            .error(function(data){
                $scope.error = data;
            });

    };                

}

When i fetch data for the first time, ngTable displays with data coming from the server. But if send another request to the server the ngTable is not updated. Data are correctly retrieved. But Data are updated when i click on the button params.count(25). What to do to refresh ngTable after success data retrieved ?

Answer 1

It might be late but i thought of putting this solution and might help someone else.. The solution can be found here (ng-table not working for dynamic data) ngtable updates only when it sees the count has changed, especially if you have pagination. When the count changes it starts new cycle.

Foe me i just had to add below code just before the ngtable creation.

if($scope.tableParams!=null){
  $scope.tableParams.$params.count = 0;
}

This resets the count and ngtable takes it as new data like said in the other link.

Hope this helps..

Answer 2

after successfully fetching data on the fly you just need to invoke reload() method on $scope.tableParams

                        $scope.tableParams.reload();

In response to your question:

    function ListCtlr($scope, $http, $location,$filter, ngTableParams) {

        $scope.formId = {searchInput: ''};

        $scope.search = function () {
            var url='server/search/'+this.searchInput;

            $http.get(url)
                .success(function (data) {
                    $scope.persons = data;
                    $scope.tableParams = new ngTableParams({
                        page: 1,            // show first page
                        count: 10           // count per page
                    }, {
                        total: ($scope.persons).length, // length of data
                        getData: function($defer, params) {
                            var currentData = $scope.persons;
                            $defer.resolve(currentData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                            params.total(currentData.length);
                        }
                    });
                    //Just after retrieving data consider invoking reload(), this can be as per your              //requirement
                    $scope.tableParams.reload();

                })
                .error(function(data){
                    $scope.error = data;
                });

        }; 

}

Answer 3

It looks like you just need to refactor your code a bit. It appears that you've built upon the "table with pagination" example from the ngTable site, but take a look at the "AJAX Data Loading" example.

The getData function of the table is what gets called by ngTable to fetch new data. So a better structure for your code would be to put your AJAX call inside the getData function:

...
total: 0,
getData: function($defer, params) {
    $http.get(url)
        .success(function (data) {
            $scope.persons = data;
            params.total(data.length);
            $defer.resolve(data);
        })
        .error(function(data) {
            // handle error
        });
}
...

Also note that you'll want to let the server side handle paging rather than using slices. You can pass the count and page values in your AJAX request to let the server figure out what to give you back. The slicing in the simple example from the site is for when you have all the data on the client side.

Answer 4

I took Deepak's answer above

if($scope.tableParams!=null){   
    $scope.tableParams.$params.count = 0;
}

and had to change it to:

if($scope.tableParams!=null){
  $scope.tableParams.$params.count = 1;
}

and it worked for us.