记录使用angular实现分页效果

<ul class="payment_conditions_paging">
<li ng-click="previous_page()" ng-show="previousPage">
<img src="static/img/previous_page@2x.png" alt="">
</li>
<li ng-repeat="page in pageList"  ng-class="{paging_active: isActivePage(page)}" ng-click="selectPage(page)">{{page}} </li>
<li class="p_last" ng-show="nextPage">
<img ng-click="p_last()" src="static/img/next_page@2x.png" alt="">
</li>
</ul>

/**
* post请求
* @param pagination  页数
* @param url    url
* @param callBack   回调函数
* @private
*/
function _get(pagination,url,callBack) {
$http({
method: 'post',
url: url,
data: {
"params":{
'pagination': pagination
}
}
}).then(function successCallback(response) {
if(response.data.result_code == 0){
callBack(response);
}else {
alert(response.data.result_msg);
}

}, function errorCallback(response) {
// 请求失败执行代码

});
}

$scope.membershipAccounts = function (){
$scope.pagination = 0;
$scope.selPage = 1;
$scope.pageList = [];

// 第一页
_get(0,'dues/transactions',function (response) {
$scope.accounts = response.data;
$scope.accountData = response.data.paged_data;
$scope.total_page = response.data.total_page;
$scope.pageSize = 3;
$scope.pages = Math.ceil($scope.accounts.total_data_count / $scope.pageSize);
//分页数
$scope.newPages = $scope.pages > 3 ? 3 : $scope.pages;
for (var i = 0; i < $scope.newPages; i++) {
$scope.pageList.push(i + 1);
}
//当总页数超过分页数，右翻页显示
if($scope.accounts.total_page >  $scope.pageSize){
$scope.nextPage = true;
}else {
$scope.nextPage = false;
}

});

// 选中某一页
$scope.selectPage = function (page) {
// console.log(page);
$scope.selPage = page;
$scope.isActivePage(page);
_get(page-1,'dues/transactions',function (response) {
// console.log(response);
$scope.accounts = response.data;
$scope.accountData = response.data.paged_data;
$scope.total_page = response.data.total_page;
$scope.pageSize = 3;
$scope.pages = Math.ceil($scope.accounts.total_data_count / $scope.pageSize);
//分页数
$scope.newPages = $scope.pages > 3 ? 3 : $scope.pages;
});
// 当前页数大于等于2时，左翻页显示
if(page >= 2){
$scope.previousPage = true;
}else {
$scope.previousPage = false;
}
//当总页数超过分页数，右翻页显示
if($scope.accounts.total_page > $scope.pageSize){
$scope.nextPage = true;
}else {
$scope.nextPage = false;
}
//当前页数大于等于总页数，右翻页隐藏
if(page >= $scope.accounts.total_page){
$scope.nextPage = false;
}
};
// 左翻页
$scope.previous_page = function () {
$scope.selectPage($scope.selPage - 1);
// console.log($scope.selPage);
var newArr = [];
angular.forEach($scope.pageList,function (val) {
this.push(val - 1);
if(val < 1){
$scope.previousPage = false;
}

},newArr);
$scope.pageList = newArr;
console.log(newArr);
angular.forEach(newArr,function (val) {
// console.log(val);
if(newArr.length == 3 && val == 0){
newArr.splice(0,1);
newArr.push(val+3);
}
});
};

// 右翻页效果
$scope.p_last = function () {
$scope.selectPage($scope.selPage + 1);
var newArr = [];
angular.forEach($scope.pageList,function (val) {
this.push(val + 1);
if(val > $scope.accounts.total_page){
$scope.nextPage = false;
}
$scope.pageList = newArr;
},newArr);
// console.log(newArr);
angular.forEach(newArr,function (val) {
// console.log(val);
if(newArr.length == 3 && val > $scope.accounts.total_page){
newArr.splice(2,1);
newArr.unshift(val-3);

}
});
};
//设置当前选中页样式
$scope.isActivePage = function (page) {
return $scope.selPage == page;
};

};