使用分页从 API 动态调用数据

Question

我需要 AngularJS 应用程序中的分页帮助。

我的网址：localhost/myurl 给我的数据如下：

Success: {
    total: 349,
    per_page: 10,
    current_page: 1,
    last_page: 35,
    from: 1,
    to: 10,
    data: [{
        name: 'name1',
        age: 'age1'
    }, {
        name: 'name2',
        age: 'age2'
    }]
}

我的看法：

<div ng-controller="DemoCtrl">
    <p><strong>Page:</strong> {{tableParams.page()}}</p>
    <p><strong>Count per page:</strong> {{tableParams.count()}}</p>
    <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'">{{user.Name}}</td>
            <td data-title="'Email'">{{user.EMAIL}}</td>
        </tr>
    </table>
</div>

我的 js

var app = angular.module('main', ['ngTable'])
.service('myservice', ['$http', function($http){
    this.getData = function(url){
        return $http.get(url);
    };
}])
.controller('DemoCtrl',['$scope', 'ngTableParams', 'myservice', function($scope, ngTableParams, myservice) {
    myservice.getData('http://localhost/testpagination/public/testpagination').success(function(response){
        if (response.Success) {
            console.log(response.Success.data);
            var data = response.Success.data;
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10           // count per page
            }, {
                total: response.Success.total, // length of data
                getData: function($defer, params) {
                    $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });
        } else if (response.Fail) {
            console.log('i got fail.');
        }
    }).error(function(response){
        console.log('http error');
    });
}]); 

我是第一次获取前十个（1 到 10）个数据，但我如何才能动态进入下一页（调用第二个分页 API）？

Answer 1

根据您在 facebook 上告诉我的问题，您必须创建一个链接并根据 ng-table 文档执行此操作 只需创建一个链接并使用 params.page(pageNum)

<a href="javascript:void(0);" ng-click="params.page(2)">Page2</a>

或者...您必须在角度侧使用路由...即

.config(function($routeProvider, $locationProvider) {
    $routeProvider
     .when('/page/:pageNum', {
      templateUrl: 'page.html',
      controller: 'pageController'
    });
  });

这里的“pageNum”将是调用的参数。即本地主机/myurl/page/2

然后在控制器中..

controller('pageController',['$scope','ngTableParams','myservice','$routeParams',function($scope, ngTableParams,myservice,$routeParams) {

    myservice.getData('http://localhost/testpagination/public/testpagination').success(function(response){
        if(response.Success){
            console.log(response.Success.data);
            var data=response.Success.data;
             $scope.tableParams = new ngTableParams({
        page: (10 * ($routeParams.pageNum-1))+1,            // show first page
        count: 10           // count per page
    }, {
        total: response.Success.total, // length of data
        getData: function($defer, params) {
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
        }else if(response.Fail){
            console.log('i got fail.');
        }
    }).error(function(response){
        console.log('http error');
    });
}]);