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上调用reload（）方法

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

另请注意，您需要让服务器端处理分页而不是使用切片。您可以在AJAX请求中传递count和page值，让服务器找出要返回的内容。来自站点的简单示例中的切片是在客户端拥有所有数据的时候。

Answer 3

可能会迟到但我考虑过这个解决方案并可能会帮助其他人...... 解决方案可以在这里找到（ng-table not working for dynamic data） ngtable仅在看到计数已更改时更新，特别是如果您有分页。当计数改变时，它开始新的循环。

对不起，我只需要在ngtable创建之前添加以下代码。

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

这会重置计数，而ngtable将其作为新数据，如另一个链接所述。

希望这会有所帮助..

Answer 4

我在上面提到了Deepak的答案

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

并且必须将其更改为：

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

它对我们有用。

ngTable：$ http.get后我的表格没有刷新

4 个答案: