AngularJs中分页插件
作者：互联网
在angular中面对一些比较复杂的项目我们需要让自己的代码具有复用性。
所以封装一些自己的额插件必不可少。
而分页插件则是比较常用的一类插件。
话不多说直接上代码：
HTML：
<ul class="pagination" ng-show="totalPage>0" data-currPage="{{currentPage}}" data-getBatchData="refreshAssets();">
<li ng-class="{true:'disabled'}[currentPage<=1]" ng-show="showFirstAndLast" dir-pagination-first>
<a class="prev pointer" aria-label="Previous" uib-tooltip="{{'page.first' | translate}}">
<i class="fa fa-angle-double-left"></i>
</a>
</li>
<li ng-class="{true:'disabled'}[currentPage<=1]" dir-pagination-prev>
<a class="prev pointer" aria-label="Previous" uib-tooltip="{{'page.prev' | translate}}">
<i class="fa fa-angle-left"></i>
</a>
</li>
<li ng-repeat="page in pages track by $index" ng-class="{true:'disabled'}[currentPage == page || page =='...']"
data-setPage="{{page}}" dir-load-pagination>
<a class="pointer" ng-class="{true:'ellipse'}[page =='...']">{{page}}</a>
</li>
<li ng-class="{true:'disabled'}[currentPage>=totalPage]" dir-pagination-next>
<a class="next pointer" aria-label="Next" uib-tooltip="{{'page.next' | translate}}">
<i class="fa fa-angle-right"></i>
</a>
</li>
<li ng-class="{true:'disabled'}[currentPage>=totalPage]" ng-show="showFirstAndLast" dir-pagination-last>
<a class="next pointer" aria-label="Next" uib-tooltip="{{'page.end' | translate}}">
<i class="fa fa-angle-double-right"></i>
</a>
</li>
<li class="pagination-extra-info" ng-show="showPageRule">每页 {{pageSize}} 条，共 {{totalPage}} 页<em class="goPage"
ng-show="showGoPage">，到第
<input class="form-control" type="number" ng-model="goPage" min="1" max="{{totalPage}}"/> 页
<button dir-pagination-go class="btn btn-default" role="button">确定</button>
</em></li>
</ul>
css
.pagination > li:nth-last-child(2) > a,
.pagination > li:nth-last-child(2) > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination-extra-info {
margin-left: 14px;
line-height: 36px;
font-size: 1.375rem;
color: #666;
}
.pagination-extra-info .form-control {
display: inline-block;
width: 65px;
height: 28px;
padding: 3px;
margin-left: 10px;
}
.pagination-extra-info .btn {
padding: 3px 8px;
margin-left: 10px;
}
.pagination-extra-info .goPage {
font-style: normal;
}
.pagination > li > a,
.pagination > li > span {
color: #4FBDA0;
}
.pagination > li > a > .fa {
font-size: 16px;
padding:0 2px;
}
.pagination a.pointer {
cursor: pointer;
}
.pagination > .disabled > a,
.pagination > .disabled > a:hover {
background-color: #68b92e;
color: #fff;
border-top-color: #68b92e;
border-bottom-color: #68b92e;
border-radius: 6px;
}
.pagination > .disabled.pagination-first a,
.pagination > .disabled.pagination-prev a,
.pagination > .disabled.pagination-next a,
.pagination > .disabled.pagination-last a,
.pagination > .disabled > a.ellipse,
.pagination > .disabled > a.prev,
.pagination > .disabled > a.next {
background-color: #fff;
color: #777;
border-color: #ddd;
}
/*sunhuiying*/
.pagination > li > a, .pagination > li > span {
padding: 2px 7px 2px 7px;
border: 0;
margin-top: 8px;
margin-right:2px;
}
.pagination > li > a, .pagination > li > span {
color: rgba(0, 0, 0, 0.48);
font-size: 12px;
}
.col-md-10 > .text-center {
margin-top: -27px
}
js
/**
* Created by wangdongqiang on 2015/7/30.
*/
/*分页组件*/
require('./pagination.css');
angular.module('soc.pagination', [])
.factory('paginationArgs', function () {
return {
templateUrl: '/soc/components/pagination/pagination.html', //不可被复写
currPage: 1, // 当前页码
pageSize: 20, // 每页显示条数，默认20条
totalPage: 1, // 总页数
goPage: 1,
serverPage: 1, // 后端当前页码
serverTotalPage: 1, // 后端总页码
serverSize: 0, // 后端每页数据条数
serverTotalSize: 0, // 后端数据总条数
noPolarPagination: "", /*获取后端分页数据的回调方法，
* 如果跨controller，建议使用$rootScope传方法
* 回调方法被调用的时候会传入两个参数：currPage和serverPage，
* 所以回调方法必需支持 传参 和 对象合并
*/
showFirstAndLast: true, // 是否显示跳转至第一页或者最后一页
showPageRule: true, // 是否显示分页规则，默认显示，如果设为false，则showGoPage自动隐藏 */
showGoPage: true, // 是否显示去第几页，默认显示
resultData: '' // 返回的数据，放在$rootScope中
};
})
.service('serPagination', ['$rootScope', 'paginationArgs', '$timeout', function ($rootScope, paginationArgs, $timeout) {
var _dataList = [];
var _this = this;
/*dataList: array 分页数据*/
this.setPagination = function (currentPage, dataList, datas, _paginationArgs) {
var _pages = [];
paginationArgs.currPage = currentPage || paginationArgs.currPage;
_dataList = dataList || _dataList;
paginationArgs.resultData = datas || paginationArgs.resultData;
paginationArgs = angular.extend(paginationArgs, _paginationArgs);
/*处理没有后端分页的情况*/
paginationArgs.serverTotalSize = paginationArgs.serverTotalSize || _dataList.length;
paginationArgs.serverSize = paginationArgs.serverSize || _dataList.length;
//获取总页数
paginationArgs.totalPage = Math.ceil(paginationArgs.serverTotalSize / paginationArgs.pageSize);
/*在每批数据中按前端分页取出要显示的数据*/
var localCurrPage = 1;
if (paginationArgs.serverSize == paginationArgs.serverTotalSize) { //无后端分页
localCurrPage = paginationArgs.currPage;
} else { //有后端分页；当前页码和每批数据分页数量相等时，localCurrPage 等于当前前端分页最后一页
localCurrPage = paginationArgs.currPage % Math.ceil((paginationArgs.serverSize / paginationArgs.pageSize)) || Math.ceil((paginationArgs.serverSize / paginationArgs.pageSize));
}
$rootScope[paginationArgs.resultData] = _dataList.slice((localCurrPage - 1) * paginationArgs.pageSize, localCurrPage * paginationArgs.pageSize);
//生成数字链接
if (paginationArgs.currPage == paginationArgs.totalPage && paginationArgs.totalPage == 1) {
_pages = [
paginationArgs.currPage
];
} else if (paginationArgs.currPage <= paginationArgs.totalPage && paginationArgs.totalPage <= 5) {
for (var p = 1; p <= paginationArgs.totalPage; p++) {
_pages.push(p);
}
} else if (paginationArgs.currPage > 1 && paginationArgs.totalPage > 5 && paginationArgs.totalPage - paginationArgs.currPage <= 3) {
_pages = [
'...',
paginationArgs.totalPage - 3,
paginationArgs.totalPage - 2,
paginationArgs.totalPage - 1,
paginationArgs.totalPage
];
} else if (paginationArgs.currPage >= 1 && paginationArgs.totalPage > 5 && paginationArgs.currPage + 1 < paginationArgs.totalPage) {
_pages = [
paginationArgs.currPage,
paginationArgs.currPage + 1,
paginationArgs.currPage + 2,
paginationArgs.currPage + 3,
'...'
];
}
paginationArgs.goPage = paginationArgs.currPage + 1 <= paginationArgs.totalPage ? paginationArgs.currPage + 1 : paginationArgs.currPage;
$timeout(function () {
$rootScope.currentPage = paginationArgs.currPage;
$rootScope.pageSize = paginationArgs.pageSize;
$rootScope.totalPage = paginationArgs.totalPage;
$rootScope.pages = _pages;
$rootScope.goPage = paginationArgs.goPage;
$rootScope.showPageRule = paginationArgs.showPageRule;
$rootScope.showGoPage = paginationArgs.showGoPage;
});
};
//删除数据，分页重新渲染，跳转至当前操作页面
$rootScope.$on('pagination-item-del', function (event, delData) {
if (typeof paginationArgs.noPolarPagination == 'function') {//数据后端分页处理
var currPage = $rootScope[paginationArgs.resultData].length == 1 ? $rootScope.currentPage - 1 : $rootScope.currentPage;
var serverPage = $rootScope.currentPage > Math.ceil((paginationArgs.serverTotalSize - 1) / paginationArgs.pageSize) ? (paginationArgs.serverPage - 1) : paginationArgs.serverPage;
var data = {
currPage: currPage,
page: serverPage
};
paginationArgs.noPolarPagination(data);
} else {//前端分页处理
_.remove(_dataList, function (item) {
return item[delData.filterKey] == delData.filterVal;
});
var currPage = paginationArgs.currPage > Math.ceil(_dataList.length / paginationArgs.pageSize) ? paginationArgs.currPage -1 : paginationArgs.currPage;
paginationArgs.serverTotalSize = _dataList.length;
paginationArgs.serverSize = _dataList.length;
paginationArgs.currPage = currPage;
_this.setPagination(currPage, _dataList, paginationArgs.resultData, paginationArgs);
}
});
}])
.directive('dirPagination', ['paginationArgs', function (paginationArgs) {
return {
restrict: 'AE',
templateUrl: paginationArgs.templateUrl,
replace: true,
transclude: true
}
}])
.directive('dirLoadPagination', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
return {
restrict: 'AE',
link: function (scope, element) {
element.bind('click', function () {
//disabled状态不处理
if (element.get(0).className.indexOf('disabled') >= 0) {
return;
}
var _goPage = parseInt(element.text()),
_goServerPage = 0;
if (_goPage < paginationArgs.currPage) { //_goPage递减
if (_goPage * paginationArgs.pageSize < paginationArgs.serverSize * paginationArgs.serverPage && paginationArgs.serverPage > 1) {
var decreasePage = Math.floor((paginationArgs.serverSize * paginationArgs.serverPage - _goPage * paginationArgs.pageSize) / paginationArgs.serverSize);
//_goServerPage = paginationArgs.serverPage - 1;
_goServerPage = paginationArgs.serverPage - decreasePage;
} else {
_goServerPage = paginationArgs.serverPage;
}
} else if (_goPage > paginationArgs.currPage) { //_goPage递增
if (_goPage * paginationArgs.pageSize > paginationArgs.serverSize * paginationArgs.serverPage && paginationArgs.serverPage < paginationArgs.serverTotalPage) {
var increasePage = Math.ceil((_goPage * paginationArgs.pageSize - paginationArgs.serverPage * paginationArgs.serverSize) / paginationArgs.serverSize);
//_goServerPage = paginationArgs.serverPage + 1;
_goServerPage = paginationArgs.serverPage + increasePage;
} else {
_goServerPage = paginationArgs.serverPage;
}
}
if (_goServerPage == paginationArgs.serverPage) {
serPagination.setPagination(_goPage);
} else if (_goServerPage > 0 && _goServerPage <= paginationArgs.totalPage) {
paginationArgs.currPage = _goPage;
paginationArgs.serverPage = _goServerPage;
var data = {
"currPage": paginationArgs.currPage,
"page": _goServerPage
};
typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
}
})
}
}
}])
.directive('dirPaginationFirst', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
return {
restrict: 'AE',
link: function (scope, element) {
element.bind('click', function () {
//disabled状态不处理
if (element.get(0).className.indexOf('disabled') >= 0) {
return;
}
//前一页为0，不可以继续翻页
if (paginationArgs.serverPage < 1 || paginationArgs.currPage <= 1) {
return;
}
if (paginationArgs.serverPage == 1) {
//服务器页码为第一页，前端直接跳转至第一页
paginationArgs.currPage = 1;
serPagination.setPagination(paginationArgs.currPage);
} else {
//服务器页码大于1，服务器端请求第一页数据，前端指向第一页
paginationArgs.currPage = 1;
paginationArgs.serverPage = 1;
var data = {
"currPage": paginationArgs.currPage,
"page": paginationArgs.serverPage
};
typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
}
});
}
}
}])
.directive('dirPaginationPrev', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
return {
restrict: 'AE',
link: function (scope, element) {
element.bind('click', function () {
//disabled状态不处理
if (element.get(0).className.indexOf('disabled') >= 0) {
return;
}
//前一页为0，不可以继续翻页
if (paginationArgs.serverPage < 1 || paginationArgs.currPage <= 1) {
return;
}
var currLocalPosition = (paginationArgs.currPage - 1) * paginationArgs.pageSize;
//请求前一页数据，继续翻页
//判断临界点
if (currLocalPosition % paginationArgs.serverSize === 0) {
paginationArgs.currPage--;
paginationArgs.serverPage--;
//获取前一页数据
var data = {
"currPage": paginationArgs.currPage,
"page": paginationArgs.serverPage
};
typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
}
//在当前批数据中向前翻页
else {
paginationArgs.currPage--;
serPagination.setPagination(paginationArgs.currPage);
}
});
}
}
}])
.directive('dirPaginationNext', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
return {
restrict: 'AE',
link: function (scope, element, attrs) {
element.bind('click', function () {
//disabled状态不处理
if (element.get(0).className.indexOf('disabled') >= 0) {
return;
}
//已经翻到最后一页，不可以继续翻页
if (paginationArgs.currPage >= paginationArgs.totalPage) {
return;
}
var currLocalPosition = paginationArgs.currPage * paginationArgs.pageSize;
var currServerPosition = paginationArgs.serverPage * paginationArgs.serverSize;
//在当前批数据中向后翻页
if (currLocalPosition < currServerPosition) {
paginationArgs.currPage++;
serPagination.setPagination(paginationArgs.currPage);
}
//请求后一页数据，继续翻页
else if (currLocalPosition == currServerPosition) {
paginationArgs.currPage++;
paginationArgs.serverPage++;
//获取后一页数据
var data = {
"currPage": paginationArgs.currPage,
"page": paginationArgs.serverPage
};
typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
}
});
}
}
}])
.directive('dirPaginationLast', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
return {
restrict: 'AE',
link: function (scope, element, attrs) {
element.bind('click', function () {
//disabled状态不处理
if (element.get(0).className.indexOf('disabled') >= 0) {
return;
}
//已经翻到最后一页，不可以继续翻页
if (paginationArgs.currPage >= paginationArgs.totalPage) {
return;
}
if (paginationArgs.serverPage == paginationArgs.serverTotalPage) {
//服务器端页码为最后一页
paginationArgs.currPage = paginationArgs.totalPage;
serPagination.setPagination(paginationArgs.currPage);
} else {
//服务器页码非最后一页
paginationArgs.currPage = paginationArgs.totalPage;
paginationArgs.serverPage = paginationArgs.serverTotalPage;
var data = {
"currPage": paginationArgs.currPage,
"page": paginationArgs.serverPage
};
typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
}
});
}
}
}])
.directive('dirPaginationGo', ['serPagination', 'paginationArgs', function (serPagination, paginationArgs) {
return {
restrict: 'AE',
link: function (scope, element) {
element.bind('click', function () {
var _goPage = parseInt(element.siblings("input").val()),
_goServerPage = 0;
if (_goPage !== paginationArgs.currPage && _goPage > 0 && _goPage <= paginationArgs.totalPage) {
_goServerPage = Math.ceil(_goPage * paginationArgs.pageSize / paginationArgs.serverSize);
_goServerPage = _goServerPage > paginationArgs.serverTotalPage ? paginationArgs.serverTotalPage : _goServerPage;
} else {
return false;
}
if (_goServerPage == paginationArgs.serverPage) { //在当前后端分页范围内
serPagination.setPagination(_goPage);
} else {
paginationArgs.currPage = _goPage;
paginationArgs.serverPage = _goServerPage;
var data = {
"currPage": paginationArgs.currPage,
"page": _goServerPage
};
typeof paginationArgs.noPolarPagination == "function" ? paginationArgs.noPolarPagination(data) : "";
}
})
}
}
}]);
module.exports = angular.module('soc.pagination');
因为是在项目中使用，直接复制粘贴是使用不了的。需要结合自己的项目需求来进行引入使用。
标签：function,goPage,pagination,分页,插件,currPage,AngularJs,paginationArgs,serverPage 来源： https://www.cnblogs.com/Alone-Michael/p/11133326.html