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>);
}]);
以上就是angular分页插件的详细内容。