ngTableParams使用$ http.get分页

Question

在AngularJS项目上工作，我遇到了以下问题：

使用本地存储的/硬编码的数据时，分页工作正常。使用远程存储的数据时，分页无法正常工作。

我已经搜索了很多，但是找不到解决我问题的方法，因此下面是代码片段：

HTML：

<div ng-controller="ngTableCtrl">
    <p><strong>Pagina:</strong> {{tableParams.page()}}</p>
    <p><strong>Aantal weergegeven:</strong> {{tableParams.count()}}</p>

    <table ng-table="tableParams" class="table table-striped" template-pagination="custom/pager">
        <tr ng-repeat="x in names">
            <td data-title="'Name"">{{x.Name}}</td>
            <td data-title="'City"">{{x.City}}</td>
            <td data-title="'Country"">{{x.Country}}</td>
        </tr>
    </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() == 2}" ng-click="params.count(2)" class="btn btn-default">2</button>
                    <button type="button" ng-class="{'active':params.count() == 5}" ng-click="params.count(5)" class="btn btn-default">5</button>
                    <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() == 15}" ng-click="params.count(15)" class="btn btn-default">15</button>
                </div>
            </li>
        </ul>
    </script>
</div>

JS：

app.controller('ngTableCtrl2', function ($scope, $http, $filter, ngTableParams) {

    $http.get('http://www.w3schools.com/angular/customers.php')
    .success(function (response) {$scope.names = response.records;});

    $scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 5, // count per page
        sorting: {
            name: 'asc' // initial sorting
        }
    }, {
        total: data.length, // length of data
        getData: function ($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
});

该网页（实时版本：http :
//178.62.232.175 :
8080/
STANDARD/#/app/table/data）在第一个表（远程，来自$
http.get）中显示所有结果，而第二个表仅显示设定的结果？（2，5，10，15）代码相同，除了：

<tr ng-repeat="x in names">

用于显示远程数据，并被替换为：

<tr ng-repeat="x in $data">

显示原始数据：

var data = [{
Name: "Alfreds Futterkiste", City: "Berlin", Country: "Germany"},{
Name: "Ana Trujillo Emparedados", City: "México D.F.", Country: "Mexico"},{
Name: "Antonio Moreno Taquería", City: "México D.F.", Country: "Mexico"},{
Name: "Around the Horn", City: "London", Country: "UK"},{
Name: "B's Beverages", City: "London", Country: "UK"},{
Name: "Berglunds snabbköp", City: "Luleå", Country: "Sweden"},{
Name: "Blauer See Delikatessen", City: "Mannheim", Country: "Germany"},{
Name: "Blondel père et fils", City: "Strasbourg", Country: "France"},{
Name: "Bólido Comidas preparadas", City: "Madrid", Country: "Spain"},{
Name: "Bon app", City: "Marseille", Country: "France"},{
Name: "Bottom-Dollar Marketse", City: "Tsawassen", Country: "Canada"},{
Name: "Cactus Comidas para llevar", City: "Buenos Aires", Country: "Argentina"}
];

第二个表的分页可以正常工作。我必须编辑什么才能使其与远程数据一起使用？

Answer 1

首先，您的代码将本地数据数组用作ngTables
getData回调中的源，由于您实际上并未尝试从官方示例中进行AJAX数据加载，因此尚不清楚您要呈现的内容是作为比较。

相反，我希望它使用$ http.get对服务器进行api调用。

请记住，要使服务器端分页正常工作，您每次查询数据时都必须更新总数，因为它们可能已更改。另外，您还必须考虑用于排序的服务器端解决方案。

这是使用github api作为测试服务的工作示例。

var app = angular.module('main', ['ngTable']);



app.controller('MainCtrl', function($scope, $http, ngTableParams) {

  $scope.tableParams = new ngTableParams({

                page: 1,

                count: 5,

            }, {

                getData: function ($defer, params) {

                    var page = params.page();

                    var size = params.count();

                    var testUrl = 'https://api.github.com/search/repositories';

                    var search = {

                      q: 'angular',

                      page: page,

                      per_page: size

                    }

                    $http.get(testUrl, { params: search, headers: { 'Content-Type': 'application/json'} })

                         .then(function(res) {

                            params.total(res.data.total_count);

                            $defer.resolve(res.data.items);

                        }, function(reason) {

                            $defer.reject();

                        }

                    );

                },

            });

});


<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>

<div  ng-app="main"  ng-controller="MainCtrl">

   <table ng-table="tableParams" class="table table-striped table-bordered table-hover table-condensed">

        <tr ng-repeat="repo in $data">

            <td data-title="'id"">{{repo.id}}</td>

            <td data-title="'name"">{{repo.name}}</td>

            <td data-title="'owner"">{{repo.owner.login}}</td>

        </tr>

</table>

<div>