指令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',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方法,通知指令进行分页查询
页面效果
原文链接：https://www.f2er.com/angularjs/148132.html
