基于angularjs的列表分页
这里我用的是angularjs1.X的版本，使用directive自定义指令完成前端列表的分页功能，废话不多说，上代码。
myPagination.js：
var app = angular.module('orderManagement', ['ui.router'])//[里面放项目需要用到的依赖]
app.directive('myPagination', function () {
return {
restrict: 'EA',
replace: true,
scope: {
pageOption: '=',
go: '=',
alert:'&'//调用父级自定义的alert弹窗
},
template:'',//template这里根据自己的项目需要自定义模板字符串
link: function ($scope) {
//容错处理
if (!$scope.pageOption.curr || isNaN($scope.pageOption.curr) || $scope.pageOption.curr < 1) $scope.pageOption.curr = 1;
if (!$scope.pageOption.all || isNaN($scope.pageOption.all) || $scope.pageOption.all < 1) $scope.pageOption.all = 1;
if ($scope.pageOption.curr > $scope.pageOption.all) $scope.pageOption.curr = $scope.pageOption.all;
if (!$scope.pageOption.count || isNaN($scope.pageOption.count) || $scope.pageOption.count < 1) $scope.pageOption.count = 10;
//得到显示页数的数组，一定要用$watch监听接口返回数据的变化，否则在查询的时候翻页的页数不会变化
$scope.$watch('pageOption',function (p1,p2) {
$scope.page = getRange($scope.pageOption.curr, $scope.pageOption.all, $scope.pageOption.count);
})
//绑定点击事件
$scope.pageClick = function (page) {
if (page == '上一页') {
page = parseInt($scope.pageOption.curr) - 1;
} else if (page == '下一页') {
page = parseInt($scope.pageOption.curr) + 1;
}else if(page == '首页'){
page=1;
}else if(page == '尾页'){
page=$scope.pageOption.all;
}
if (page < 1) page = 1;
else if (page > $scope.pageOption.all) page = $scope.pageOption.all;
//点击相同的页数 不执行点击事件
if (page == $scope.pageOption.curr) return;
if ($scope.pageOption.click && typeof $scope.pageOption.click === 'function') {
$scope.pageOption.click(page);
$scope.pageOption.curr = page;
$scope.page = getRange($scope.pageOption.curr, $scope.pageOption.all, $scope.pageOption.count);
}
};
//跳转分页
$scope.jump=function (nmb) {
if(nmb>=1&&nmb<=$scope.pageOption.all){
$scope.pageClick(nmb);
}else{
$scope.alert();
$scope.go=""
}
}
//返回页数范围（用来遍历）
function getRange(curr, all, count) {
//计算显示的页数
curr = parseInt(curr);
all = parseInt(all);
count = parseInt(count);
var from = curr - parseInt(count / 2);
var to = curr + parseInt(count / 2) + (count % 2) - 1;
//显示的页数容处理
if (from <= 0) {
from = 1;
to = from + count - 1;
if (to > all) {
to = all;
}
}
if (to > all) {
to = all;
from = to - count + 1;
if (from <= 0) {
from = 1;
}
}
var range = [];
for (var i = from; i <= to; i++) {
range.push(i);
}
range.push('下一页');
range.unshift('上一页');
range.push('尾页');
range.unshift('首页');
return range;
}
}
}
});html：
列表页面的controller，contrller.js:
app.controller("repayListConts",["$scope","$rootScope",function($scope,$rootScope){
function list(page) {
$.ajax({
type: 'GET',
async: false,//这里一定要用同步请求，否则directive拿不到分页的数据
url: "/order/getOrderList?userName="+$scope.ordlist.clientName+"&userNationalid="+$scope.ordlist.clientId+"&userPhone="+$scope.ordlist.clientPhone+"&empNameCode="+$scope.ordlist.employeeNumber+"&state="+$scope.ordlist.orderState+"&orderCode="+$scope.ordlist.orderNumber+"&applyStartTime="+$scope.ordlist.applyStartTime+"&applyEndTime="+$scope.ordlist.applyEndTime+"&moneyResource="+$scope.ordlist.fundingChannels+"&level1Code="+$scope.ordlist.level1Code+"&level2Code="+$scope.ordlist.level2Code+"&level3Code="+$scope.ordlist.level3Code+"&orgCode="+$scope.ordlist.orgCode+"&storeCode="+$scope.ordlist.stores+"&page="+page+"&size="+$scope.ordlist.pageSize
success:function successCallback(res) {
//设置分页的参数，具体参数从返回的数据中取，以及具体的列表逻辑操作都写在这里
$scope.option = {
curr: page, //当前页数
all: $scope.PageCount, //总页数
count: $scope.PageCount > 10 ? 10 : $scope.PageCount, //最多显示的页数，默认为10
items: $scope.totalData,//总条数
//点击页数的回调函数，参数page为点击的页数
click: function (page) {
list(page);
}
}
},
error:function errorCallback(response) {
$rootScope.alertPart("获取列表失败！")
}
})
}
$scope.myAlert=function () {//$rootScope.alertPart()是全局自定义的一个alert弹窗，不需要的小伙伴可忽略。
$rootScope.alertPart("请输入有效页码！")
};
}最终的效果就是这样子啦，很简单吧~
