【组件库】【angular1.0】01、AngularJs常用的分页组件

今天在做angular项目的时候，需要实现一个分页的功能。所以就尝试自己去封装一个组件，以便后期可以复用。展示效果如图所示：

HTML代码：

 9">
首页
上一页
{{page}}
下一页
尾页
共: {{infoDetail.totalCount}}条

CSS代码：

/* 分页的样式 start */
.pagination {width: 100%;height: 28px;line-height: 28px;color: #363636;margin: 5px auto 15px;
}
.pagination .pagination-list {width: 95%;height: 28px;line-height: 28px;margin: 0 auto;color: #999;
}
.pagination .pagination-list li {float: left;font-size: 14px;height: 26px;line-height: 26px;border: 1px solid #ebebeb;border-right: none;
}
.pagination .pagination-list li:last-child {border-right: 1px solid #ebebeb;padding: 0 0.1rem;
}
.pagination .pagination-list li a {height: 26px;line-height: 26px;width: auto;min-width: 18px;margin: 0 0.1rem;display: inline-block;text-align: center;
}
.pagination .pagination-list li.active {/*background-color: #fff;*//*border: 1px solid #ebebeb;*//*color: #bf1a21;*//*border-radius: .10rem;*/background-color: red;color: #fff;
}
.pagination .pagination-list li.disabled {pointer-events: none;cursor: default;opacity: 0.6;
}
/* 分页的样式 end */

JS代码： 

app.controller('selectlistCtrl', ['$scope', '$rootScope', 'ToolService', '$http', function ($scope, $rootScope, ToolService, $http) {// 数据结构$scope.infoDetail = {pageSize: 10, // 每页显示10条pageNum: 1, // 当前页totalCount: 0, // 总共数据量pageAllNum: 0, // 总共的页码pagesList: [], // 点击的页码数组}// 初始化数据$scope.init = function () {$scope.findUnselectedCourseData($scope.infoDetail.pageNum, $scope.infoDetail.pageSize);	// 查询条件下的未选的选修课程数据};// 查询条件下的未选的选修课程数据$scope.findUnselectedCourseData = function(pageNum, pageSize) {if ($scope.infoDetail.searchInput.length != 0) {$scope.infoDetail.courseName = $scope.infoDetail.courseName;} else {$scope.infoDetail.courseName = "";};var tempParams = {pageNum: pageNum,pageSize: pageSize,validity: $scope.infoDetail.validity,flag: $scope.infoDetail.flag,installId: $scope.infoDetail.installId,courseName: $scope.infoDetail.courseName,rootPlanId: $scope.infoDetail.rootPlanId,planId: $scope.infoDetail.planId,courseCategoryId: $scope.infoDetail.courseCategoryId,sortFlag: $scope.infoDetail.sortFlag,};$http({method: "POST",params: tempParams,url: basePath + $scope.infoDetail.data.findUnselectedCourseList.url,headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}).then(function (data){console.log(data, '课程列表');$scope.infoDetail.pageNum = data.data.obj.pageNum; // 当前页$scope.infoDetail.totalCount = data.data.obj.total; // 总资源数$scope.infoDetail.pageAllNum = Math.ceil($scope.infoDetail.totalCount/$scope.infoDetail.pageSize); // 总共的页码$scope.infoDetail.pagesList=calculateIndexes($scope.infoDetail.pageNum,$scope.infoDetail.pageAllNum,5);}).catch(function (e){console.log(e);})};//单选按钮选中$scope.select= function(id){alert(id);};//首页$scope.p_index = function(){$scope.load_page(1);};//尾页$scope.p_last = function(){$scope.load_page($scope.infoDetail.pageAllNum);};//上一页$scope.p_pagePre = function(){if( $scope.infoDetail.pageNum > 1){$scope.infoDetail.pageNum --;$scope.load_page($scope.infoDetail.pageNum);}};//下一页$scope.p_pageNext = function(){if ( $scope.infoDetail.pageNum < $scope.infoDetail.pageAllNum ){$scope.infoDetail.pageNum ++;$scope.load_page($scope.infoDetail.pageNum);}};//加载某一页$scope.load_page = function(page){$scope.findUnselectedCourseData(page, $scope.infoDetail.pageSize);};// 初始化函数$scope.init();})/*** 分页算法* current ：当前页码，length：总页码，displayLength：显示长度  @return array[1,2,3,4,5]**/
var calculateIndexes = function (current, length, displayLength) {var indexes = [];var start = Math.round(current - displayLength / 2);var end = Math.round(current + displayLength / 2);if (start <= 1) {start = 1;end = start + displayLength - 1;if (end >= length - 1) {end = length - 1;}}if (end >= length - 1) {end = length;start = end - displayLength + 1;if (start <= 1) {start = 1;}}for (var i = start; i <= end; i++) {indexes.push(i);}return indexes;
};

到此为止就基本完成啦。在此特别感谢齐玉林同学的博文，给我了启发和灵感。谢谢

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！