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

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

我的URL:

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>

---

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

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

此处的“pageNum”将是调用的参数。。即localhost/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');
    });
}]); 

---

您使用的是$routeProvider还是$stateProvider？？根据它，您可以从URL获取页面参数值，并将其传递给您的API！！用我的代码更新了我的问题

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

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