Angularjs 分页控件

实现效果:

实现步骤:

 1.分页页面：page.html,页面多余样式，需要自己去除。

class="row" ng-show="conf.totalItems > 0">class="col-md-5 col-sm-12">class="dataTables_info" id="sample_1_info" role="status" aria-live="polite" ng-show="true">{ conf.numberOfPages }} page,total {{ conf.totalItems }}-->the"text" class="form-control input-xsmall input-inline" ng-model="jumpPageNum"ng-keyup="jumpToPage($event)"/>page,per page<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions "ng-change="changeItemsPerPage()" class="form-control input-xsmall input-inline">select>/total{{ conf.totalItems }}item{ conf.numberOfPages }} pages article {{ conf.totalItems }}-->class="col-md-7 col-sm-12">class="dataTables_paginate paging_bootstrap_full_number" id="sample_1_paginate">
class="pagination" style="visibility: visible;">
"firstPage()" ng-class="{disabled:isFirst()}">"javascript:" title="first"><iclass="fa fa-angle-double-left">
"prevPage()" ng-class="{disabled:isFirst()}">"javascript:" title="prev"><iclass="fa fa-angle-left">
"item in pageList track by $index" ng-click="changeCurrentPage(item)"ng-class="{active: item == conf.currentPage, separate: item == '...'}">"javascript:">{{ item}}
"nextPage()" ng-class="{disabled:isEnd()}">"javascript:" title="next"><iclass="fa fa-angle-right">
"lastPage()" ng-class="{disabled:isEnd()}">"javascript:"title="{{ getText('last') }}"><iclass="fa fa-angle-double-right">

2.分页控件：

angular.module('bet.paging', []).constant('pageSizeArray', [10, 15, 20, 30, 50]).constant('pagingConstant', {CURRENTPAGE: 1,ITEMSPERPAGE: 20}).directive('paging', paging);function paging(pageSizeArray) {return {restrice: 'EA',templateUrl: '/utils/page.html',replace: true,scope: {conf: '='},link: function (scope, element, attrs) {scope.changeCurrentPage = function (item) {if (item == '...') {return;} else {scope.conf.currentPage = item;}};scope.conf.pagesLength = parseInt(scope.conf.pagesLength) ? parseInt(scope.conf.pagesLength) : 9;if (scope.conf.pagesLength % 2 === 0) {scope.conf.pagesLength = scope.conf.pagesLength - 1;}// conf.erPageOptionsif (!scope.conf.perPageOptions) {scope.conf.perPageOptions = pageSizeArray;}// pageList
            function getPagination() {// conf.currentPagescope.conf.currentPage = parseInt(scope.conf.currentPage) ? parseInt(scope.conf.currentPage) : 1;// conf.totalItemsscope.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;}// numberOfPagesscope.conf.numberOfPages = Math.ceil(scope.conf.totalItems / scope.conf.itemsPerPage);// judge currentPage > scope.numberOfPagesif (scope.conf.currentPage < 1) {scope.conf.currentPage = 1;}if (scope.conf.currentPage > scope.conf.numberOfPages) {scope.conf.currentPage = scope.conf.numberOfPages;}// jumpPageNumscope.jumpPageNum = scope.conf.currentPage;var perPageOptionsLength = scope.conf.perPageOptions.length;// define statevar perPageOptionsStatus;for (var i = 0; i < perPageOptionsLength; i++) {if (scope.conf.perPageOptions[i] == scope.conf.itemsPerPage) {perPageOptionsStatus = true;}}if (!perPageOptionsStatus) {scope.conf.perPageOptions.push(scope.conf.itemsPerPage);}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 {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;}// firstPagescope.firstPage = function () {scope.conf.currentPage = 1;};// prevPagescope.prevPage = function () {if (scope.conf.currentPage > 1) {scope.conf.currentPage -= 1;}};// nextPagescope.nextPage = function () {if (scope.conf.currentPage < scope.conf.numberOfPages) {scope.conf.currentPage += 1;}};//lastPagescope.lastPage = function () {scope.conf.currentPage = scope.conf.numberOfPages;};//is first pagescope.isFirst = function () {if (scope.conf.currentPage > 1) {return false;}return true;};//is end pagescope.isEnd = function () {if (scope.conf.currentPage < scope.conf.numberOfPages) {return false;}return true;};// 跳转页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 + ' ';if (scope.conf.rememberPerPage) {if (localStorage[scope.conf.rememberPerPage]) {newValue += localStorage[scope.conf.rememberPerPage];} else {newValue += scope.conf.itemsPerPage;}} else {newValue += scope.conf.itemsPerPage;}return newValue;}, getPagination);//scope.getText = function (key) {//    return currentPage.text[key];//};
        }}
};

3.页面调用：

"pagingConf">

//声明user模块并引入bet.paging子模块
angular.module('bet.user', ['bet.paging']);angular.module('bet.user').controller('userAppCtrl', userAppCtrl);//依赖注入pagingConstant
userAppCtrl.$inject = ['$scope', 'pagingConstant'];function userAppCtrl($scope, pagingConstant) {//paging config
$scope.pagingConf = {currentPage: pagingConstant.CURRENTPAGE,itemsPerPage: pagingConstant.ITEMSPERPAGE,totalItems:500        　　
};});

转载于:https://www.cnblogs.com/ywblog/p/5039865.html

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