AngularJS 分页
前端源码：
<div>
<h1>列表页33</h1>
<table>
<thead>
<tr><td>CandiID</td><td>HotelName</td></tr>
</thead>
<tr ng-repeat="item in List track by $index"><td>{{item.CandiID}}</td><td>{{item.HotelName}}</td></tr>
</table>
<div>
<%--<pagination ></pagination>--%>
</div>
<div>
<tm-pagination conf="paginationConf"></tm-pagination>
</div>
</div>
AngularJS
var listModule = angular.module('app.farmhouselist', []);
//控制器
var listCtrl = function ($scope, $http, $q, GetCandidateListByCondition) {
var conditionObj = new Object();
conditionObj.Province = 23;
conditionObj.SourceType = 128;
conditionObj.SalesManName = 'xixi';
conditionObj.UserCategory = "0";
conditionObj.CurrentUser = "xixi";
var condition = JSON.stringify(conditionObj);
var GetAllEmployee = function () {
var postData = {
pageIndex: $scope.paginationConf.currentPage,
pageSize: $scope.paginationConf.itemsPerPage
};
//任务单
GetCandidateListByCondition.event(condition, postData.pageIndex, postData.pageSize).then(function (data) {
$scope.List = eval(data.PageData);
$scope.totalCount = data.TotalCount;
$scope.paginationConf.totalItems = data.TotalCount;
});
}
//配置分页基本参数
$scope.paginationConf = {
currentPage: 1,
itemsPerPage: 15
};
$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
}
listModule.controller("listCtrl", ['$scope', listCtrl]);
//分页指令
listModule.directive("tmPagination", function () {
return {
restrict: 'EA',
//template: '<div class="page-list">' +
// '<ul class="pagination" ng-show="conf.totalItems > 0">' +
// '<li ng-class="{disabled: conf.currentPage == 1}" ng-click="prevPage()"><span>«</span></li>' +
// '<li ng-repeat="item in pageList track by $index" ng-class="{active: item == conf.currentPage, separate: item == \'...\'}" ' +
// 'ng-click="changeCurrentPage(item)">' +
// '<span>{{ item }}</span>' +
// '</li>' +
// '<li ng-class="{disabled: conf.currentPage == conf.numberOfPages}" ng-click="nextPage()"><span>»</span></li>' +
// '</ul>' +
// '<div class="page-total" ng-show="conf.totalItems > 0">' +
// '第 <input type="text" ng-model="jumpPageNum" ng-keyup="jumpToPage($event)"/> 页 ' +
// '每页 <select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions " ng-change="changeItemsPerPage()"></select>' +
// ' 共<strong>{{ conf.totalItems }}</strong> 条' +
// '</div>' +
// '<div class="no-items" ng-show="conf.totalItems <= 0">暂无数据</div>' +
// '</div>',
template: '<div class="page-list">' +
'<ul class="pagination" ng-show="conf.totalItems > 0">' +
'<li ng-class="{disabled: conf.currentPage == 1}" ng-click="prevPage()"><span>«</span></li>' +
'<li ng-repeat="item in pageList track by $index" ng-class="{active: item == conf.currentPage, separate: item == \'...\'}" ' +
'ng-click="changeCurrentPage(item)">' +
'<span>{{ item }}</span>' +
'</li>' +
'<li ng-class="{disabled: conf.currentPage == conf.numberOfPages}" ng-click="nextPage()"><span>»</span></li>' +
'</ul>' +
'<div class="page-total" ng-show="conf.totalItems > 0">' +
'第 <input type="text" ng-model="jumpPageNum" ng-keyup="jumpToPage($event)"/> 页 ' +
' 每页{{conf.itemsPerPage}}条' +
' 共<strong>{{ conf.totalItems }}</strong> 条' +
'</div>' +
'<div class="no-items" ng-show="conf.totalItems <= 0">暂无数据</div>' +
'</div>',
replace: true,
scope: {
conf: '='
},
link: function (scope, element, attrs) {
// 变更当前页
scope.changeCurrentPage = function (item) {
if (item == '...') {
return;
} else {
scope.conf.currentPage = item;
}
};
// 定义分页的长度必须为奇数 (default:9)
scope.conf.pagesLength = parseInt(scope.conf.pagesLength) ? parseInt(scope.conf.pagesLength) : 10;
if (scope.conf.pagesLength % 2 === 0) {
// 如果不是奇数的时候处理一下
scope.conf.pagesLength = scope.conf.pagesLength - 1;
}
// conf.erPageOptions
if (!scope.conf.perPageOptions) {
scope.conf.perPageOptions = [10, 15, 20, 30, 50];
}
// pageList数组
function getPagination() {
// conf.currentPage
scope.conf.currentPage = parseInt(scope.conf.currentPage) ? parseInt(scope.conf.currentPage) : 1;
//scope.conf.totalItems
//判断一下scope.conf.totalItems，如果是undefined,直接返回不执行后面的代码 add by cpf
if (scope.conf.totalItems==undefined) {
return;
}
scope.conf.totalItems = parseInt(scope.conf.totalItems);
// conf.itemsPerPage (default:15)
// 先判断一下本地存储中有没有这个值
if (scope.conf.rememberPerPage) {
if (!parseInt(localStorage[scope.conf.rememberPerPage])) {
localStorage[scope.conf.rememberPerPage] = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15;
}
scope.conf.itemsPerPage = parseInt(localStorage[scope.conf.rememberPerPage]);
} else {
scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15;
}
// numberOfPages
scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems / scope.conf.itemsPerPage);
// judge currentPage > scope.numberOfPages
if (scope.conf.currentPage < 1) {
scope.conf.currentPage = 1;
}
if (scope.conf.currentPage > scope.conf.numberOfPages) {
scope.conf.currentPage = scope.conf.numberOfPages;
}
// jumpPageNum
scope.jumpPageNum = scope.conf.currentPage;
// 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中
var perPageOptionsLength = scope.conf.perPageOptions.length;
// 定义状态
var perPageOptionsStatus;
for (var i = 0; i < perPageOptionsLength; i++) {
if (scope.conf.perPageOptions[i] == scope.conf.itemsPerPage) {
perPageOptionsStatus = true;
}
}
// 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中
if (!perPageOptionsStatus) {
scope.conf.perPageOptions.push(scope.conf.itemsPerPage);
}
// 对选项进行sort
scope.conf.perPageOptions.sort(function (a, b) { return a - b });
scope.pageList = [];
if (scope.conf.numberOfPages <= scope.conf.pagesLength) {
// 判断总页数如果小于等于分页的长度，若小于则直接显示
for (i = 1; i <= scope.conf.numberOfPages; i++) {
scope.pageList.push(i);
}
} else {
// 总页数大于分页长度（此时分为三种情况：1.左边没有...2.右边没有...3.左右都有...）
// 计算中心偏移量
var offset = (scope.conf.pagesLength - 1) / 2;
if (scope.conf.currentPage <= offset) {
// 左边没有...
for (i = 1; i <= offset + 1; i++) {
scope.pageList.push(i);
}
scope.pageList.push('...');
scope.pageList.push(scope.conf.numberOfPages);
} else if (scope.conf.currentPage > scope.conf.numberOfPages - offset) {
scope.pageList.push(1);
scope.pageList.push('...');
for (i = offset + 1; i >= 1; i--) {
scope.pageList.push(scope.conf.numberOfPages - i);
}
scope.pageList.push(scope.conf.numberOfPages);
} else {
// 最后一种情况，两边都有...
scope.pageList.push(1);
scope.pageList.push('...');
for (i = Math.ceil(offset / 2) ; i >= 1; i--) {
scope.pageList.push(scope.conf.currentPage - i);
}
scope.pageList.push(scope.conf.currentPage);
for (i = 1; i <= offset / 2; i++) {
scope.pageList.push(scope.conf.currentPage + i);
}
scope.pageList.push('...');
scope.pageList.push(scope.conf.numberOfPages);
}
}
if (scope.conf.onChange) {
scope.conf.onChange();
}
scope.$parent.conf = scope.conf;
}
// prevPage
scope.prevPage = function () {
if (scope.conf.currentPage > 1) {
scope.conf.currentPage -= 1;
}
};
// nextPage
scope.nextPage = function () {
if (scope.conf.currentPage < scope.conf.numberOfPages) {
scope.conf.currentPage += 1;
}
};
// 跳转页
scope.jumpToPage = function () {
scope.jumpPageNum = scope.jumpPageNum.replace(/[^0-9]/g, '');
if (scope.jumpPageNum !== '') {
scope.conf.currentPage = scope.jumpPageNum;
}
};
// 修改每页显示的条数
scope.changeItemsPerPage = function () {
// 清除本地存储的值方便重新设置
if (scope.conf.rememberPerPage) {
localStorage.removeItem(scope.conf.rememberPerPage);
}
};
scope.$watch(function () {
var newValue = scope.conf.currentPage + ' ' + scope.conf.totalItems + ' ';
// 如果直接watch perPage变化的时候，因为记住功能的原因，所以一开始可能调用两次。
//所以用了如下方式处理
if (scope.conf.rememberPerPage) {
// 由于记住的时候需要特别处理一下，不然可能造成反复请求
// 之所以不监控localStorage[scope.conf.rememberPerPage]是因为在删除的时候会undefind
// 然后又一次请求
if (localStorage[scope.conf.rememberPerPage]) {
newValue += localStorage[scope.conf.rememberPerPage];
} else {
newValue += scope.conf.itemsPerPage;
}
} else {
newValue += scope.conf.itemsPerPage;
}
return newValue;
}, getPagination);
}
};
});
