ngTable: Моя таблица не обновляется после $ http.get

Question

Я использую ngTable для отображения данных с сервера. Когда я загружаю данные в первый раз, ngTable создается с сервером формы данных. Но когда во второй раз извлекают данные с другими критериями поиска. NgTable не обновляется в это время, даже если данные извлекаются. Мне нужно щелкнуть по разбивке на страницы, чтобы получить обновление данных.

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

Это контроллер:

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

    };     

} 

Когда я выборки данных в первый раз, ngTable дисплеи с данными, поступающими от сервера. Но если отправить другой запрос на сервер, ngTable не будет обновлен. Данные правильно получены. Но данные обновляются, когда я нажимаю кнопку params.count (25). Что делать, чтобы обновить ngTable после получения удаленных данных?

Answer 1

после успешного извлечения данных на лету вам просто нужно вызвать перезагрузку() метод на $ scope.tableParams

     $scope.tableParams.reload(); 

В ответ на ваш вопрос:

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 2

Похоже, вы только нужно немного реорганизовать свой код. Похоже, что вы построили пример «таблицы с разбивкой на страницы» с сайта ngTable, но посмотрите на пример «AJAX Data Loading».

Функция таблицы getData, которую вызывает ngTable для получения новых данных. Так лучше структура для вашего кода будет поставить вызов AJAX внутри функции getData:

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

отметить также, что вы хотите, чтобы позволить стороне сервера ручки подкачки, а не с помощью срезов. Вы можете передать значения count и page в запросе AJAX, чтобы сервер понял, что вам нужно вернуть. Нарезка в простом примере с сайта - это когда у вас есть все данные на стороне клиента.

Answer 3

Это может быть поздно, но я думал, что положить это решение и может помочь кому-то еще .. Решение можно найти здесь (ng-table not working for dynamic data) ngtable обновления только тогда, когда он видит, граф изменился, особенно если у вас есть разбиение на страницы. Когда счетчик изменяется, начинается новый цикл.

Против меня мне просто нужно было добавить код ниже непосредственно перед созданием ngtable.

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

Это сбрасывает счетчик и ngtable воспринимает как новые данные, как сказано в другой ссылке.

Надеется, что это помогает ..

Answer 4

Я принял ответ Дипака превыше

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

и пришелся изменить его на:

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

и он работал на нас.