AngularJS分頁控制組件 paginationConf

組件信息如下:

<!-- 分頁組件開始 -->
	<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}

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章