首先引入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>