angular 分页插件的使用
html:
<pagination
total-items="totalItems"
ng-model="currentPage"
items-per-page="itemPerPage"
previous-text="上一页"
next-text="下一页"
page-sizes="pageSizes"
edit-page="editPage"
ng-change="getData(currentPage,itemPerPage)"> //获取数据的方法
</pagination>
js:数据取多次 每次翻页都重新取数据
// 分页:数据取多次 每次翻页都重新取数据
$scope.currentPage = ;
$scope.itemPerPage = ;
$scope.pageSizes = [,, , , ];
$scope.editPage = true;
$scope.progressing=false;
$scope.getData = function (currentPage, itemPerPage) {
if($scope.currentPage>&&!$scope.progressing) {
var params = {
'pageIndex': $scope.currentPage-,
'pageSize': $scope.itemPerPage,
'insuranceOrgCode': $scope.insuranceOrgCode,//接口参数
};
$scope.progressing=true;
$http.post('/product/getProductList.do', angular.toJson(params)).success(function (res) {
$scope.dataList = res.data.listObj;//接口取值后,赋值于变量
$scope.totalItems = res.data.total;
$scope.pageCount = Math.ceil($scope.totalItems / itemPerPage);
$scope.progressing=false;
})
}
};
$scope.getData();//页面进来,默认查询
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 - );
var end = ($scope.totalItems < itemPerPage * currentPage) ? $scope.totalItems : itemPerPage * currentPage;
$scope.dataList = ($scope.dataListStore.slice(start, end));
}
})($scope.currentPage = , $scope.itemPerPage = , $scope.pageSizes = [,, , , ], $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 =[,, , , , , ];
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, );
$scope.itemPerPage = parseInt(n, );
$scope.totalPages = self.calculateTotalPages();
}
});
} else {
this.itemsPerPage = config.itemsPerPage;
}
}; this.calculateTotalPages = function() {
var totalPages = this.itemsPerPage < ? : Math.ceil($scope.totalItems / this.itemsPerPage);
return Math.max(totalPages || , );
}; this.render = function() {
if(ngModelCtrl.$viewValue!='')
$scope.page = parseInt(ngModelCtrl.$viewValue, ) || ;
}; $scope.selectPage = function(page) {
console.log('page:',page)
if (/^[-]+$/.test(page)) {
if ($scope.page !== page && page > && page <= $scope.totalPages) {
ngModelCtrl.$setViewValue(page);
ngModelCtrl.$render();
}
if(page==){
setTimeout(function () {
$("#paginationNum").focus();
$("#paginationNum").select();
})
}
}else {
$scope.selectPage($scope.currentPage=''); }
}; $scope.getText = function( key ) {
return $scope[key + 'Text'] || self.config[key + 'Text'];
};
$scope.noPrevious = function() {
return $scope.page === ;
};
$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 variable if ( $scope.page > value ) {
$scope.selectPage(value);
} else {
ngModelCtrl.$render();
}
}); $scope.checkPage=function(min,max,c) {
var current = c;
if (typeof current != 'string' || current.length > ){
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 == && $scope.currentPage == ) {
$("#paginationNum").focus();
$("#paginationNum").select();
}
} }]) .constant('paginationConfig', {
itemsPerPage: ,
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[], ngModelCtrl = ctrls[]; if (!ngModelCtrl) {
return; // do nothing if no ng-model
}
scope.$watch('itemsPerPage',function(n,o){
if(n&&n!=o) {
ngModelCtrl.$setViewValue();
ngModelCtrl.$setViewValue();
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, );
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 limits
var startPage = , endPage = totalPages;
var isMaxSized = ( angular.isDefined(maxSize) && maxSize < totalPages ); // recompute if maxSize
if ( isMaxSized ) {
if ( rotate ) {
// Current page is displayed in the middle of the visible ones
startPage = Math.max(currentPage - Math.floor(maxSize/), );
endPage = startPage + maxSize - ; // Adjust if limit is exceeded
if (endPage > totalPages) {
endPage = totalPages;
startPage = endPage - maxSize + ;
}
} else {
// Visible pages are paginated with maxSize
startPage = ((Math.ceil(currentPage / maxSize) - ) * maxSize) + ; // Adjust last page if limit is exceeded
endPage = Math.min(startPage + maxSize - , totalPages);
}
}
// Add page number links
for (var number = startPage; number <= endPage; number++) {
//ignore those unused numbers
if(number == startPage||number == endPage || number < currentPage+&&number > currentPage-) {
var page = makePage(number, number, number === currentPage);
pages.push(page);
}
} // Add links to move between page sets
if ( isMaxSized && ! rotate ) {
if ( startPage > ) {
var previousPageSet = makePage(startPage - , '...', false);
pages.unshift(previousPageSet);
} if ( endPage < totalPages ) {
var nextPageSet = makePage(endPage + , '...', false);
pages.push(nextPageSet);
}
}
return pages;
} var originalRender = paginationCtrl.render;
paginationCtrl.render = function() {
originalRender();
if (scope.page > && scope.page <= scope.totalPages) {
scope.pages = getPages(scope.page, scope.totalPages);
}
};
}
};
}]) .constant('pagerConfig', {
itemsPerPage: ,
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[], ngModelCtrl = ctrls[]; 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 分页插件的使用的更多相关文章
- angular分页插件tm.pagination 解决触发二次请求的问题
angular分页插件tm.pagination(解决触发二次请求的问题) DEMO: http://jqvue.com/demo/tm.pagination/index.html#?current ...
- angular分页插件tm.pagination二次触发问题解决歪方案
今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心 ...
- 在angular中利用分页插件进行分页
必需:angular分页js和css 当然还有angular.js 还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...
- 一款好用的分页插件用于regularJS
最近在用一款来自网易的javascript MVC 框架regularJS来写项目,这是网易一位叫郑海波的大神写的一款框架,所谓regualrJS, 作者这样取名主要是因为这个框架更像是angular ...
- angularJS前端分页插件
首先在项目中引入 分页插件的 js 和 css: 在html页面引入 相关js 和 css: 在控制器中引入分页插件中定义的 module[可以打开pagination.js查看,可以看到 其实,在插 ...
- MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
- 分页插件--根据Bootstrap Paginator改写的js插件
刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...
- [原创]jquery+css3打造一款ajax分页插件
最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
随机推荐
- 【详记MySql问题大全集】二、安装并破解Navicat
Navicat for MySql 11.1.13 企业版 下载地址: 链接:https://pan.baidu.com/s/1N3ZQXNyx-W8D4AsuZdsMug 密码:x0rd 第二个是N ...
- 一个applicationContext 加载错误导致的阻塞解决小结
问题为对接一个sso的验证模块,正确的对接姿势为,接入一个 filter, 然后接入一个 SsoListener . 然而在接入之后,却导致了应用无法正常启动,或者说看起来很奇怪,来看下都遇到什么样的 ...
- 产品经理聊产品--mac book pro 2018 初体验
工作前几年,使用电脑,基本上都是微软的操作系统,自从从大厂出来之后,才逐渐熟悉使用linux,到现在基本上都是基本上一个月windows平台基本不需要开机就可以,可以说基本上被ubuntu的简洁和实用 ...
- remote: Incorrect username or password ( access token )
解决问题 进入控制面板 用户账号,选择管理您的凭据 修改凭据 修改完成后,保存即可
- okHttp超时报错解决方案
Android 使用okhttp,如果客户端等待的时间超过了okHttp的默认时间,就会报错java.net.SocketTimeoutException: timeout 所以,需要在调用okHtt ...
- 异步请求中jetty处理ServletRequestListener的坑
标题起得比较诡异,其实并不是坑,而是jetty似乎压根就没做对异步request的ServletRequestListener的特殊处理,如果文中有错误欢迎提出,可能自己有所疏漏了. 之前遇到了一个b ...
- Java I/O : Java中的进制详解
作者:李强强 上一篇,泥瓦匠基础地讲了下Java I/O : Bit Operation 位运算.这一讲,泥瓦匠带你走进Java中的进制详解. 一.引子 在Java世界里,99%的工作都是处理这高层. ...
- Map<String, Object>转Object,Object转 Map<String, Object>
Map转Object import com.alibaba.fastjson.JSON; Map<String, Object> boneAgeOrderMap=boneAgeOrderS ...
- Docker介绍及常用操作演示(一)--技术流ken
Docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互 ...
- 分布式系统监视zabbix讲解六之自定义监控项--技术流ken
宏 概述 Zabbix支持许多在多种情况下使用宏.宏是一个变量,由如下特殊语法标识: {MACRO} 根据在上下文中, 宏解析为一个特殊的值. 有效地使用宏可以节省时间,并使Zabbix变地更加高效. ...