指令html模板
page.html
<div>
<div class="pull-left pagination-detail">
<span class="pagination-info">
显示第 {{(conf.currentPage-1) * conf.pageSize + 1}} 到第 {{conf.currentPage == conf.totalPage ? conf.total : conf.currentPage * conf.pageSize }} 条记录 , 总共 {{conf.total}} 条记录
</span>
<span class="page-list">
, 每页显示
<span class="btn-group dropup">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="page-size">{{conf.pageSize}}</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu page-size-select" role="menu">
<li ng-repeat="n in conf.pageSizeList" ng-click="changePageSize(n)">
<a ng-bind="n"></a>
</li>
</ul>
</span>
条记录
</span>
</div>
<ul class="pagination pull-right pagination-nav" ng-show="conf.totalPage>1">
<li ng-class="{true:'active'}[conf.currentPage==1]">
<a ng-click="loadPage(1)">«</a>
</li>
<li ng-class="{true:'disabled'}[conf.currentPage==1]">
<a ng-click="prev()"> ‹ </a>
</li>
<li ng-class="{true:'active'}[conf.currentPage==page]" ng-repeat="page in conf.pages">
<a ng-click="loadPage(page)" ng-bind="page"></a>
</li>
<li ng-class="{true:'disabled'}[conf.currentPage==conf.totalPage]">
<a ng-click="next()"> › </a>
</li>
<li ng-class="{true:'active'}[conf.currentPage==conf.totalPage]">
<a ng-click="loadPage(conf.totalPage)"> » </a>
</li>
</ul>
</div>
指令
app.directive('pagination', ['$http', '$q', function ($http, $q) {
return {
restrict: 'E',
templateUrl: './modules/business/page.html',
replace: true,
scope: {
list: '=', //列表数据
url: '@', //接口url
method: '@', //get or post
requestParam: '=', //请求参数
requestData: '=', //请求对象数据
event: '@' //事件名, 外部调用分页查询的事件
},
link: function (scope, element) {
//监听事件
scope.$on(scope.event, function (event, data) {
console.log(scope.event, data);
scope.loadData();
});
//ajax服务
var AjaxService = {
get: function (url, params) {
var defered = $q.defer();
$http({
method: 'GET',
url: url,
params: params
})
.success(function (data) {
defered.resolve(data);
})
.error(function (err) {
defered.reject(err);
});
return defered.promise;
},
post: function (url, params, data) {
var defered = $q.defer();
$http({
method: 'POST',
url: url,
params: params,
data: data
})
.success(function (data) {
defered.resolve(data);
})
.error(function (err) {
defered.reject(err);
});
return defered.promise;
}
};
//配置参数
scope.conf = {
currentPage: 1,
totalPage: 1,
endPage: 1,
pageSize: 15,
pages: [],
total: 0,
pageSizeList: [10, 15, 20, 25, 30, 35, 40, 45, 50]
};
//加载数据
scope.loadData = function () {
scope.requestParam = scope.requestParam instanceof Object && scope.requestParam || {};
scope.requestData = scope.requestData instanceof Object && scope.requestData || {};
scope.requestParam.page = scope.conf.currentPage;
scope.requestParam.pageSize = scope.conf.pageSize;
var promise = null;
if (scope.method == 'GET') promise = AjaxService.get(scope.url, scope.requestParam);
else if (scope.method == 'POST') promise = AjaxService.post(scope.url, scope.requestParam, scope.requestData);
promise.then(function (resp) {
if (resp && resp.code == 0) {
if (resp.result && resp.result instanceof Array) scope.list = resp.result;
else scope.list = [];
if (resp.total && typeof(resp.total) == 'number') scope.conf.total = resp.total;
else scope.conf.total = 0;
}
scope.calcPages();
});
};
//改变页大小
scope.changePageSize = function (n) {
scope.conf.pageSize = n;
scope.conf.currentPage = 1;
scope.loadData();
};
//下一页
scope.next = function () {
if (scope.conf.currentPage < scope.conf.totalPage) {
scope.conf.currentPage++;
scope.loadData();
}
};
//上一页
scope.prev = function () {
if (scope.conf.currentPage > 1) {
scope.conf.currentPage--;
scope.loadData();
}
};
//加载指定页
scope.loadPage = function (page) {
if (scope.conf.currentPage != page) {
scope.conf.currentPage = page;
scope.loadData();
}
};
//查询
scope.query = function () {
scope.conf.currentPage = 1;
scope.loadData();
};
//计算页数
scope.calcPages = function () {
//计算总页数
scope.conf.totalPage = Math.ceil(scope.conf.total / scope.conf.pageSize);
//生成快捷页码
if (scope.conf.currentPage > 1 && scope.conf.currentPage < scope.conf.totalPage) {
scope.conf.pages = [
scope.conf.currentPage - 1,
scope.conf.currentPage,
scope.conf.currentPage + 1
];
} else if (scope.conf.currentPage == 1 && scope.conf.totalPage > 1) {
scope.conf.pages = [
scope.conf.currentPage,
scope.conf.currentPage + 1
];
} else if (scope.conf.currentPage == scope.conf.totalPage && scope.conf.totalPage > 1) {
scope.conf.pages = [
scope.conf.currentPage - 1,
scope.conf.currentPage
];
}
};
//指令加载完后立即查询
scope.query();
}
};
}]);
为了代码集中一点, 我把ajaxservice定义在了内部.
指令基本包含分页所需功能,且不需修改, 下次就可以直接引用.
应用
index.html
<pagination list="businesses" url="/business/select" event="event-pagination-query-bp" method="POST"
request-param="requestParam"
request-data="requestData">
</pagination>
示例代码中, list参数是双向绑定的列表数据, businesses就是页面table绑定的ng-repeat循环的列表集合, url是后台接口, event是事件名, method是接口方法,GET or POST, request-param就是请求参数,request-data就是请求体.
controller.js
//分页请求参数
$scope.requestParam = {};
//分页请求对象(模糊查询时,对象属性可以为列表数据的字段)
$scope.requestData = {};
/**
* 广播通知分页指令
*/
$scope.query = function () {
$scope.$broadcast('event-pagination-query-bp', 'query');
};
当新增数据或者更新数据后, 可以调用controller里的query方法, 通知指令进行分页查询
