組件信息如下:
<!-- 分頁組件開始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分頁組件結束 -->
//分頁控制組件
$scope.paginationConf = {
currentPage: 1, //當前頁
totalItems: 10, //總記錄數
itemsPerPage: 10, //每頁記錄數
perPageOptions: [10, 20, 30, 40, 50], //分頁選項
onChange: function(){ //當前頁碼變更後、頁面初次加載時會自動觸發的方法,
$scope.reloadList(); //重新加載
}
};
$scope.reloadList=function(){
$scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}
//開始分頁
$scope.search=function(page,size){
$http.get('../brand/search.do?page='+page+'&rows='+size).success(
function(response){
$scope.list = response.rows;
//更新總記錄數
$scope.paginationConf.totalItems = response.total;
}
);
}
其中的response包含着分頁後每頁的信息集合(當前頁結果集)和所有信息總量。
response=
{"rows":[{"firstChar":"S","id":6,"name":"360"},
{"firstChar":"Z","id":7,"name":"中興"},
{"firstChar":"M","id":8,"name":"魅族"},
{"firstChar":"P","id":9,"name":"蘋果"},
{"firstChar":"V","id":10,"name":"VIVO"}],"total":28}