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

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

1 个答案: