使用分頁API動態調用數據

Question

我需要在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> 

我的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表文檔 只需創建一個鏈接，並使用params.page（頁次）

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

的「頁次」這裏將是調用參數..即本地主機/ 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'); 
    }); 
}]);