html:
<pagination total-items= ng-model= items-per-page= previous-text= next-text= page-sizes= edit-page= ng-change=> //获取数据的方法 </pagination>
js:数据取多次 每次翻页都重新取数据
$scope.currentPage = = = [,, , , = ==($scope.currentPage>&&! =: $scope.currentPage-=, angular.toJson(=== Math.ceil($scope.totalItems /=
js:分页情况:数据只取一次
// 分页情况:数据只取一次
($scope.getData = function (currentPage, itemPerPage) {if (angular.isUndefined($scope.dataList)) {var params = {'pageIndex': currentPage,'pageSize': itemPerPage,'insuranceOrgCode': $scope.insuranceOrgCode,'prodType': $scope.prodType,'productName': $scope.productName,
};
$http.post('/product/getProductList.do', params).success(function (res) {
$scope.dataList = res.data.listObj;
$scope.totalItems = ($scope.dataListStore = res.data.listObj).length;
$scope.pageCount = Math.ceil($scope.totalItems / itemPerPage);
$scope.getData(currentPage, itemPerPage)
})
} else {var start = itemPerPage * (currentPage - 1);var end = ($scope.totalItems < itemPerPage * currentPage) ? $scope.totalItems : itemPerPage * currentPage;
$scope.dataList = ($scope.dataListStore.slice(start, end));
}
})($scope.currentPage = 1, $scope.itemPerPage = 2, $scope.pageSizes = [2,10, 20, 50, 100], $scope.editPage = true);
以下是引入的分页插件文件
/*
* angular-ui-bootstrap
* http://angular-ui.github.io/bootstrap/
* Version: 0.12.1 - 2015-10-17
* License: MIT
* ReWrite Ver:1.0.1
* Fixed:页数只能输入数字
*
* ReWrite Ver:1.0.2
* Fixed:页数计算优化 *///angular.module("ui.bootstrap", ["ui.bootstrap.tpls","ui.bootstrap.pagination"]);//angular.module("ui.bootstrap.tpls", ["template/pagination/pager.html","template/pagination/pagination.html"]);angular.module('ui.bootstrap.pagination', ["template/pagination/pager.html","template/pagination/pagination.html"])
.controller('PaginationController', ['$scope', '$attrs', '$parse', function ($scope, $attrs, $parse) {
$scope.pageSizes =[2,10, 20, 50, 100, 300, 500]; var self = this,
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop; this.init = function(ngModelCtrl_, config) {
ngModelCtrl = ngModelCtrl_;this.config = config;
ngModelCtrl.$render = function() {
self.render();
};if ($attrs.itemsPerPage) {
$scope.$parent.$watch($parse($attrs.itemsPerPage), function(n,o) {if(n) {
self.itemsPerPage = parseInt(n, 10);
$scope.itemPerPage = parseInt(n, 10);
$scope.totalPages = self.calculateTotalPages();
}
});
} else { this.itemsPerPage = config.itemsPerPage;
}
}; this.calculateTotalPages = function() {var totalPages = this.itemsPerPage < 1 ? 1 : Math.ceil($scope.totalItems / this.itemsPerPage);return Math.max(totalPages || 0, 1);
}; this.render = function() {if(ngModelCtrl.$viewValue!='')
$scope.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
};
$scope.selectPage = function(page) {
console.log('page:',page)if (/^[0-9]+$/.test(page)) { if ($scope.page !== page && page > 0 && page <= $scope.totalPages) {
ngModelCtrl.$setViewValue(page);
ngModelCtrl.$render();
} if(page==1){
setTimeout(function () {
$("#paginationNum").focus();
$("#paginationNum").select();
})
}
}else {
$scope.selectPage($scope.currentPage='1');
}
};
$scope.getText = function( key ) {return $scope[key + 'Text'] || self.config[key + 'Text'];
};
$scope.noPrevious = function() {return $scope.page === 1;
};
$scope.noNext = function() {return $scope.page === $scope.totalPages;
};
$scope.$watch('totalItems', function() {
$scope.totalPages = self.calculateTotalPages();
});
$scope.$watch('totalPages', function(value) {
setNumPages($scope.$parent, value); // Readonly variableif ( $scope.page > value ) {
$scope.selectPage(value);
} else {
ngModelCtrl.$render();
}
});
$scope.checkPage=function(min,max,c) {var current = c;if (typeof current != 'string' || current.length > 0){
current = current < min ? min : current > max ? max : current;
}return current;
};// $scope.keyDown = function (page) {// var oEvent = window.event;// if (oEvent.keyCode == 8 && page == 1) {// $("#paginationNum").focus();// $("#paginationNum").select();// }// };//window.keyDown = function () {var oEvent = window.event;if (oEvent.keyCode == 8 && $scope.currentPage == 1) {
$("#paginationNum").focus();
$("#paginationNum").select();
}
}
}])
.constant('paginationConfig', {
itemsPerPage: 10,
boundaryLinks: false,
directionLinks: true,
firstText: 'First',
previousText: 'Previous',
nextText: 'Next',
lastText: 'Last',
rotate: true})
.directive('pagination', ['$parse', 'paginationConfig', function($parse, paginationConfig) { return {
restrict: 'EA',
scope: {
totalItems: '=',
itemsPerPage:'=',
pageSizes:'=',
editPage:'=',
firstText: '@',
previousText: '@',
nextText: '@',
lastText: '@',
currentPage:'=ngModel'},
require: ['pagination', '?ngModel'],
controller: 'PaginationController',
templateUrl: 'template/pagination/pagination.html',
replace: true,
link: function(scope, element, attrs, ctrls) { var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1]; if (!ngModelCtrl) {return; // do nothing if no ng-model }
scope.$watch('itemsPerPage',function(n,o){if(n&&n!=o) {
ngModelCtrl.$setViewValue(0);
ngModelCtrl.$setViewValue(1);
ngModelCtrl.$render();
}
}) // Setup configuration parameters var maxSize = angular.isDefined(attrs.maxSize) ? scope.$parent.$eval(attrs.maxSize) : paginationConfig.maxSize,
rotate = angular.isDefined(attrs.rotate) ? scope.$parent.$eval(attrs.rotate) : paginationConfig.rotate;
scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : paginationConfig.directionLinks;
paginationCtrl.init(ngModelCtrl, paginationConfig); if (attrs.maxSize) {
scope.$parent.$watch($parse(attrs.maxSize), function(value) {
maxSize = parseInt(value, 10);
paginationCtrl.render();
});
} // Create page object used in template function makePage(number, text, isActive) {return {
number: number,
text: text,
active: isActive
};
}
function getPages(currentPage, totalPages) {var pages = [];// Default page limitsvar startPage = 1, endPage = totalPages;var isMaxSized = ( angular.isDefined(maxSize) && maxSize < totalPages );// recompute if maxSizeif ( isMaxSized ) { if ( rotate ) {// Current page is displayed in the middle of the visible onesstartPage = Math.max(currentPage - Math.floor(maxSize/2), 1);
endPage = startPage + maxSize - 1;// Adjust if limit is exceededif (endPage > totalPages) {
endPage = totalPages;
startPage = endPage - maxSize + 1;
}
} else {// Visible pages are paginated with maxSizestartPage = ((Math.ceil(currentPage / maxSize) - 1) * maxSize) + 1;// Adjust last page if limit is exceededendPage = Math.min(startPage + maxSize - 1, totalPages);
}
}// Add page number linksfor (var number = startPage; number <= endPage; number++) { //ignore those unused numbers if(number == startPage||number == endPage || number < currentPage+10&&number > currentPage-10) {var page = makePage(number, number, number === currentPage);
pages.push(page);
}
}// Add links to move between page setsif ( isMaxSized && ! rotate ) { if ( startPage > 1 ) {var previousPageSet = makePage(startPage - 1, '...', false);
pages.unshift(previousPageSet);
} if ( endPage < totalPages ) {var nextPageSet = makePage(endPage + 1, '...', false);
pages.push(nextPageSet);
}
}return pages;
} var originalRender = paginationCtrl.render;
paginationCtrl.render = function() {
originalRender();if (scope.page > 0 && scope.page <= scope.totalPages) {
scope.pages = getPages(scope.page, scope.totalPages);
}
};
}
};
}])
.constant('pagerConfig', {
itemsPerPage: 10,
previousText: '« Previous',
nextText: 'Next »',
align: true})
.directive('pager', ['pagerConfig', function(pagerConfig) { return {
restrict: 'EA',
scope: {
totalItems: '=',
previousText: '@',
nextText: '@'},
require: ['pager', '?ngModel'],
controller: 'PaginationController',
templateUrl: 'template/pagination/pager.html',
replace: true,
link: function(scope, element, attrs, ctrls) { var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1]; if (!ngModelCtrl) {return; // do nothing if no ng-model }
scope.align = angular.isDefined(attrs.align) ? scope.$parent.$eval(attrs.align) : pagerConfig.align;
paginationCtrl.init(ngModelCtrl, pagerConfig);
}
};
}]);
angular.module("template/pagination/pager.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/pagination/pager.html", "<ul class=\"pager\">\n" + " <li ng-class=\"{disabled: noPrevious(), previous: align}\"><a href ng-click=\"selectPage(page - 1)\">{{getText('previous')}}</a></li>\n" + " <li ng-class=\"{disabled: noNext(), next: align}\"><a href ng-click=\"selectPage(page + 1)\">{{getText('next')}}</a></li>\n" + "</ul>");
}]);// angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {// $templateCache.put("template/pagination/pagination.html",// "<div>\n"+// "<div class=\"edit\"><span class=\"total-page\" ng-show=\"editPage\"> 共{{totalPages}}页 共{{totalItems}}条 </span><span class=\"page-edit\" ng-show=\"editPage\">第 "+// "<input type=\"text\" ng-model=\"currentPage\" ng-change=\"selectPage(currentPage=checkPage(1,totalPages,currentPage))\""+// "requied class=\"table-counts-text\"/> 页</span><span class=\"page-size-edit\" ng-show=\"pageSizes\"> 每页 \n"+// "<select ng-model=\"itemsPerPage\" class=\"table-counts-select\"\n"+// "ng-options=\"count as count for count in pageSizes\">\n"+// "</select> 条</span>\n"+// "</div>\n"+// "<ul class=\"pagination\">\n" +// " <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(1)\">{{getText('first')}}</a></li>\n" +// " <li ng-if=\"directionLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(page - 1)\">{{getText('previous')}}</a></li>\n" +// " <li ng-if=\"page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<=16\" "+// "ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active}\">"+// "<a ng-if=\"page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<16\" href ng-click=\"selectPage(page.number)\">{{page.text}}</a>"+// "<span ng-if=\"page.number!=1&&page.number!=totalPages&&(page.number-currentPage)*(page.number-currentPage)==16\">....</span></li>\n" +// " <li ng-if=\"directionLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(page + 1)\">{{getText('next')}}</a></li>\n" +// " <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(totalPages)\">{{getText('last')}}</a></li>\n" +// "</ul></div>");// }]);angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/pagination/pagination.html", "<div class='row'><div class='col-sm-4 hidden-xs'>跳至 <input type='number' id='paginationNum' class='input-sm form-control inline v-middle text-center' style='width: 50px' ng-model='currentPage' ng-pattern='/^[0-9]+$/' ng-change='selectPage(currentPage=checkPage(1,totalPages,currentPage))' requied> 页，每页显示<select class='form-control input-sm' style='width: 100px;display: inline-block' ng-model='itemsPerPage' ng-options='count as count for count in pageSizes'></select>条</div><div class='col-sm-4 text-center'><small class='text-muted inline m-t-sm m-b-sm' ng-show='editPage'>总共{{totalItems}}条记录</small><small class='text-muted inline m-t-sm m-b-sm' ng-show='editPage'>/共{{totalPages}}页</small></div><div class='col-sm-4 text-right text-center-xs'><ul class='pagination m-t-none m-b-none'><li ng-if='boundaryLinks' ng-class='{disabled: noPrevious()}'><a href ng-click='selectPage(1)'><i class='fa fa-chevron-left'></i>{{getText('first')}}</a></li><li ng-if='directionLinks' ng-class='{disabled: noPrevious()}'><a href ng-click='selectPage(page - 1)'>{{getText('previous')}}</a></li><li ng-if='page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<=16' ng-repeat='page in pages track by $index' ng-class='{active: page.active}'><a href ng-if='page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<16' ng-click='selectPage(page.number)'>{{page.text}}</a><span ng-if='page.number!=1&&page.number!=totalPages&&(page.number-currentPage)*(page.number-currentPage)==16'>....</span></li><li ng-if='directionLinks' ng-class='{disabled: noNext()}'><a href ng-click='selectPage(page + 1)'>{{getText('next')}}</a></li><li ng-if='boundaryLinks' ng-class='{disabled: noNext()}'><a href ng-click='selectPage(totalPages)'><i class='fa fa-chevron-right'></i>{{getText('last')}}</a></li></ul></div></div>");
}]);
Atas ialah kandungan terperinci angular分页插件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah pemalam jquery?
kaedah paging mysql
jquery melaksanakan kaedah paging
Penyelesaian untuk membahagikan jadual perkataan kepada dua muka surat
Pengenalan kepada pemalam yang diperlukan untuk vscode menjalankan java
warna fon css
Apakah enjin carian direktori yang ada?
Perbezaan antara front-end dan back-end
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
