1. 程式人生 > >angualrjs前端使用分頁功能

angualrjs前端使用分頁功能

首先引入js和css:

<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script src="../plugins/angularjs/pagination.js" type="text/javascript"></script>

核心程式碼:

<script type="text/javascript">

var myapp = angular.module("pinyougou",['pagination']); //在pinyougou模組中引入pagination模組
myapp.controller("brandController",["$scope", "$http",function($scope, $http){
$scope.findAll = function(){
$http.get("../brand/findAll.do").success(
function(response){
$scope.list = response;
}
);
}
/* $scope.findAll(); */
$scope.paginationConf = {
currentPage: 1,  //當前頁碼
totalItems: 10,  //總條目數
itemsPerPage: 10,  //每頁有多少條目
perPageOptions: [10, 20, 30, 40, 50],  //可供選擇的條目
onChange: function(){  //當頁面變化的時候執行的函式
$scope.
reloadPage();
}
};


$scope.reloadPage = function(){
$scope.
findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}


$scope.findPage = function(page, size){
$http.get('../brand/findPage.do?page=' + page + '&size=' + size).success(
function(response){
$scope.list = response.rows;
$scope.paginationConf.totalItems = response.total;//更新總記錄數
}
);
}


}]);

</script>

在table的下面寫:

<tm-pagination conf="paginationConf"></tm-pagination>