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

Я использую 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 после успешного получения данных?

Источник

4 ответа

Возможно, уже поздно, но я подумал о том, чтобы поставить это решение и помочь кому-то еще. Решение можно найти здесь ( ng-таблица не работает для динамических данных). Обновления ngtable только тогда, когда он видит, что счетчик изменился, особенно если у вас есть нумерация страниц., Когда счет меняется, начинается новый цикл.

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

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

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

Надеюсь это поможет..

Источник

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

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

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

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

и это сработало для нас.

Источник

После успешного извлечения данных на лету вам просто нужно вызвать метод reload() для $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;
                });

        }; 

}
Источник

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

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-запросе, чтобы сервер выяснил, что вам вернуть. Нарезка в простом примере с сайта предназначена для случаев, когда у вас есть все данные на стороне клиента.

Источник
Другие вопросы по тегам