From 066baa23dc1038fff08e6b1eebed63856ceebd85 Mon Sep 17 00:00:00 2001 From: Yoyo Date: Sat, 30 Jul 2016 17:16:43 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E4=BB=8E=E6=A0=B9=E6=9C=AC=E4=B8=8A?= =?UTF-8?q?=E5=8E=BB=E8=A7=A3=E5=86=B3=E5=BC=95=E5=8F=91=E7=9A=84=E9=87=8D?= =?UTF-8?q?=E5=A4=8D=E8=B0=83=E7=94=A8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pagination/tm.pagination.js | 229 ++++++++++++++++++++------------ 1 file changed, 144 insertions(+), 85 deletions(-) diff --git a/src/pagination/tm.pagination.js b/src/pagination/tm.pagination.js index 0c544f3..2eb84c4 100755 --- a/src/pagination/tm.pagination.js +++ b/src/pagination/tm.pagination.js @@ -1,6 +1,6 @@ /** * name: tm.pagination - * Version: 0.0.2 + * Version: 1.0.0 beta */ angular.module('tm.pagination', []).directive('tmPagination',[function(){ return { @@ -15,9 +15,9 @@ angular.module('tm.pagination', []).directive('tmPagination',[function(){ '
  • »
    • ' + '' + '
    ' + - '第页 ' + - '每页' + - '/共{{ conf.totalItems }}条' + + '每页' + + '/共{{ conf.totalItems }}条 ' + + '跳转至' + '
    ' + '
    暂无数据
    ' + '', @@ -25,173 +25,232 @@ angular.module('tm.pagination', []).directive('tmPagination',[function(){ scope: { conf: '=' }, - link: function(scope, element, attrs){ + link: function(scope, element, attrs) { + + var conf = scope.conf; - // 变更当前页 - scope.changeCurrentPage = function(item) { - if(item == '...'){ - return; - }else{ - scope.conf.currentPage = item; + // 默认分页长度 + var defaultPagesLength = 9; + + // 默认分页选项可调整每页显示的条数 + var defaultPerPageOptions = [10, 15, 20, 30, 50]; + + // 默认每页的个数 + var defaultPerPage = 15; + + // 获取分页长度 + if(conf.pagesLength) { + // 判断一下分页长度 + conf.pagesLength = parseInt(conf.pagesLength, 10); + + if(!conf.pagesLength) { + conf.pagesLength = defaultPagesLength; + } + + // 分页长度必须为奇数，如果传偶数时，自动处理 + if(conf.pagesLength % 2 === 0) { + conf.pagesLength += 1; } - }; - // 定义分页的长度必须为奇数 (default:9) - 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; + } else { + conf.pagesLength = defaultPagesLength } - // conf.erPageOptions - if(!scope.conf.perPageOptions){ - scope.conf.perPageOptions = [10, 15, 20, 30, 50]; + // 分页选项可调整每页显示的条数 + if(!conf.perPageOptions){ + conf.perPageOptions = defaultPagesLength; } // pageList数组 function getPagination(newValue, oldValue) { - // conf.currentPage - scope.conf.currentPage = parseInt(scope.conf.currentPage) ? parseInt(scope.conf.currentPage) : 1; - + if(conf.currentPage) { + conf.currentPage = parseInt(scope.conf.currentPage, 10); + } + if(!conf.currentPage) { + conf.currentPage = 1; + } // conf.totalItems - scope.conf.totalItems = parseInt(scope.conf.totalItems) ? parseInt(scope.conf.totalItems) : 0; + if(conf.totalItems) { + conf.totalItems = parseInt(conf.totalItems, 10); + } - // conf.itemsPerPage (default:15) - scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15; + // conf.totalItems + if(!conf.totalItems) { + conf.totalItems = 0; + return; + } + // conf.itemsPerPage + if(conf.itemsPerPage) { + conf.itemsPerPage = parseInt(conf.itemsPerPage, 10); + } + if(!conf.itemsPerPage) { + conf.itemsPerPage = defaultPerPage; + } // numberOfPages - scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems/scope.conf.itemsPerPage); - - // judge currentPage > scope.numberOfPages - if(scope.conf.currentPage < 1){ - scope.conf.currentPage = 1; - } + conf.numberOfPages = Math.ceil(conf.totalItems/conf.itemsPerPage); // 如果分页总数>0，并且当前页大于分页总数 if(scope.conf.numberOfPages > 0 && scope.conf.currentPage > scope.conf.numberOfPages){ scope.conf.currentPage = scope.conf.numberOfPages; } - // jumpPageNum - scope.jumpPageNum = scope.conf.currentPage; - // 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中 var perPageOptionsLength = scope.conf.perPageOptions.length; + // 定义状态 var perPageOptionsStatus; for(var i = 0; i < perPageOptionsLength; i++){ - if(scope.conf.perPageOptions[i] == scope.conf.itemsPerPage){ + if(conf.perPageOptions[i] == conf.itemsPerPage){ perPageOptionsStatus = true; } } // 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中 if(!perPageOptionsStatus){ - scope.conf.perPageOptions.push(scope.conf.itemsPerPage); + conf.perPageOptions.push(conf.itemsPerPage); } // 对选项进行sort - scope.conf.perPageOptions.sort(function(a, b){return a-b}); + conf.perPageOptions.sort(function(a, b) {return a - b}); + + // 页码相关 scope.pageList = []; - if(scope.conf.numberOfPages <= scope.conf.pagesLength){ + if(conf.numberOfPages <= conf.pagesLength){ // 判断总页数如果小于等于分页的长度，若小于则直接显示 - for(i =1; i <= scope.conf.numberOfPages; i++){ + for(i =1; i <= conf.numberOfPages; i++){ scope.pageList.push(i); } }else{ // 总页数大于分页长度（此时分为三种情况：1.左边没有...2.右边没有...3.左右都有...） // 计算中心偏移量 - var offset = (scope.conf.pagesLength - 1)/2; - if(scope.conf.currentPage <= offset){ + var offset = (conf.pagesLength - 1) / 2; + if(conf.currentPage <= offset){ // 左边没有... - for(i =1; i <= offset +1; i++){ + 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(conf.numberOfPages); + }else if(conf.currentPage > 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(conf.numberOfPages - i); } - scope.pageList.push(scope.conf.numberOfPages); + scope.pageList.push(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); + for(i = Math.ceil(offset / 2) ; i >= 1; i--){ + scope.pageList.push(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(conf.currentPage); + for(i = 1; i <= offset / 2; i++){ + scope.pageList.push(conf.currentPage + i); } scope.pageList.push('...'); - scope.pageList.push(scope.conf.numberOfPages); + scope.pageList.push(conf.numberOfPages); } } - if(scope.conf.onChange){ - - - // 防止初始化两次请求问题 - if(!(oldValue != newValue && oldValue[0] == 0)) { - scope.conf.onChange(); - } - - } - scope.$parent.conf = scope.conf; + scope.$parent.conf = conf; } // prevPage - scope.prevPage = function(){ - if(scope.conf.currentPage > 1){ - scope.conf.currentPage -= 1; + scope.prevPage = function() { + if(conf.currentPage > 1){ + conf.currentPage -= 1; } }; + // nextPage - scope.nextPage = function(){ - if(scope.conf.currentPage < scope.conf.numberOfPages){ - scope.conf.currentPage += 1; + scope.nextPage = function() { + if(conf.currentPage < conf.numberOfPages){ + conf.currentPage += 1; } }; - // 跳转页 - scope.jumpToPage = function(){ - scope.jumpPageNum = scope.jumpPageNum.replace(/[^0-9]/g,''); - if(scope.jumpPageNum !== ''){ - scope.conf.currentPage = scope.jumpPageNum; + // 变更当前页 + scope.changeCurrentPage = function(item) { + + if(item == '...'){ + return; + }else{ + conf.currentPage = item; + getPagination(); + // conf.onChange()函数 + if(conf.onChange) { + conf.onChange(); + } } }; - + // 修改每页展示的条数 + scope.changeItemsPerPage = function() { - scope.$watch(function() { - + // 一发展示条数变更，当前页将重置为1 + conf.currentPage = 1; - if(!scope.conf.totalItems) { - scope.conf.totalItems = 0; + getPagination(); + // conf.onChange()函数 + if(conf.onChange) { + conf.onChange(); } + }; - - var newValue = scope.conf.totalItems + ' ' + scope.conf.currentPage + ' ' + scope.conf.itemsPerPage; - + // 跳转页 + scope.jumpToPage = function() { + num = scope.jumpPageNum; + if(num.match(/\d+/)) { + num = parseInt(num, 10); - return newValue; + if(num && num != conf.currentPage) { + if(num > conf.numberOfPages) { + num = conf.numberOfPages; + } + // 跳转 + conf.currentPage = num; + getPagination(); + // conf.onChange()函数 + if(conf.onChange) { + conf.onChange(); + } + scope.jumpPageNum = ''; + } + } + }; + scope.jumpPageKeyUp = function(e) { + var keycode = window.event ? e.keyCode :e.which; + + if(keycode == 13) { + scope.jumpToPage(); + } + } - }, getPagination); - + scope.$watch('conf.totalItems', function(value, oldValue) { + + // 在无值或值相等的时候，去执行onChange事件 + if(!value || value == oldValue) { + + if(conf.onChange) { + conf.onChange(); + } + } + getPagination(); + }) + } }; }]); From 13b3e153f7ff09292923772ec7f6f33aff1a1f4a Mon Sep 17 00:00:00 2001 From: Yoyo Date: Sat, 30 Jul 2016 17:19:47 +0800 Subject: [PATCH 2/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1624113..d115af5 100755 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ conf is a object, it has attributes like below: * itemsPerPage: number of items per page, default 15 * onChange: when the pagination is change, it will excute the function * pagesLength: number for pagination size, default 9 -* perPageOptions: defind select how many items in a page, default [10, 15, 20, 30, 50] +* perPageOptions: define select how many items in a page, default [10, 15, 20, 30, 50] if you want to use with ajax,you may follow like this: From 831b39d60c120349b12a7218bf873a9f97c52da6 Mon Sep 17 00:00:00 2001 From: Yoyo Date: Sat, 30 Jul 2016 17:24:53 +0800 Subject: [PATCH 3/8] Update README.md --- README.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index d115af5..1db09c1 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# AngularJs UI -- Want to be the best UI +# AngularJs Pagination -- Want to be the best Pagination 希望成为最好用分页，没有之一。 -Since name for a UI is boring, so I decide name it to tm.I'm not good at English, wish you you catch what I said And help me improve my English. +Since name for a pagination is boring, so I decide name it to tm.I'm not good at English, wish you you catch what I said And help me improve my English. ## tm.pagination -- A very simple and useful pagination in AngularJs Online demo [tm.pagination](http://demo.miaoyueyue.com/js/ng/AngularJs-UI/demo/pagination.html) @@ -46,10 +46,4 @@ if you want to use with ajax,you may follow like this: }) } }; - - - - - - - + From 48c269742644825447762c1a982eb4f714b18662 Mon Sep 17 00:00:00 2001 From: Yoyo Date: Sat, 30 Jul 2016 17:25:27 +0800 Subject: [PATCH 4/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1db09c1..382d36f 100755 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# AngularJs Pagination -- Want to be the best Pagination 希望成为最好用分页，没有之一。 +# AngularJs Pagination -- Want to be the best Pagination Since name for a pagination is boring, so I decide name it to tm.I'm not good at English, wish you you catch what I said And help me improve my English. From c4699925e505f2820eec4a2a4552203dad2a3720 Mon Sep 17 00:00:00 2001 From: lunix01 <646696730@qq.com> Date: Tue, 20 Sep 2016 11:39:19 +0800 Subject: [PATCH 5/8] Update tm.pagination.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 上一页下一页不请求数据 --- src/pagination/tm.pagination.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pagination/tm.pagination.js b/src/pagination/tm.pagination.js index 2eb84c4..14d43ee 100755 --- a/src/pagination/tm.pagination.js +++ b/src/pagination/tm.pagination.js @@ -170,6 +170,10 @@ angular.module('tm.pagination', []).directive('tmPagination',[function(){ if(conf.currentPage > 1){ conf.currentPage -= 1; } + getPagination(); + if(conf.onChange) { + conf.onChange(); + } }; // nextPage @@ -177,6 +181,10 @@ angular.module('tm.pagination', []).directive('tmPagination',[function(){ if(conf.currentPage < conf.numberOfPages){ conf.currentPage += 1; } + getPagination(); + if(conf.onChange) { + conf.onChange(); + } }; // 变更当前页 From a10564caadcc8acbb4882e05e8cb5b503f6b4b29 Mon Sep 17 00:00:00 2001 From: Yoyo Date: Thu, 22 Sep 2016 17:37:02 +0800 Subject: [PATCH 6/8] Update README.md --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 382d36f..3bbd278 100755 --- a/README.md +++ b/README.md @@ -5,6 +5,12 @@ Since name for a pagination is boring, so I decide name it to tm.I'm not good at ## tm.pagination -- A very simple and useful pagination in AngularJs Online demo [tm.pagination](http://demo.miaoyueyue.com/js/ng/AngularJs-UI/demo/pagination.html) +**relate blog articles:** + +- https://www.miaoyueyue.com/archives/791.html +- https://www.miaoyueyue.com/archives/813.html +- https://www.miaoyueyue.com/archives/833.html + default: From da6ec9f18f990b73ac8b040dfb25035bd8245484 Mon Sep 17 00:00:00 2001 From: yfor <377900058@qq.com> Date: Sat, 4 Mar 2017 14:17:16 +0800 Subject: [PATCH 7/8] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=80=82=E9=85=8Damazeui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 样式适配amazeui --- src/pagination/tm.pagination.js | 34 +++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/src/pagination/tm.pagination.js b/src/pagination/tm.pagination.js index 14d43ee..b6b7869 100755 --- a/src/pagination/tm.pagination.js +++ b/src/pagination/tm.pagination.js @@ -5,22 +5,24 @@ angular.module('tm.pagination', []).directive('tmPagination',[function(){ return { restrict: 'EA', - template: '
    ' + - '
      ' + - '
    • «
      • ' + - '
    • ' + - '{{ item }}' + - '
      • ' + - '
    • »
      • ' + - '
    ' + - '
    ' + - '每页' + - '/共{{ conf.totalItems }}条 ' + - '跳转至' + - '
    ' + - '
    暂无数据
    ' + - '
    ', + template: '
    ' + + '
      ' + + '
    • 上一页
      • ' + + '
    • ' + + '{{ item }}' + + '
      • ' + + '
    • 下一页
      • ' + + '
    ' + + /** + '
    ' + + '每页' + + '/共{{ conf.totalItems }}条 ' + + '跳转至' + + '
    ' + + **/ + '
    暂无数据
    ' + + '
    ', replace: true, scope: { conf: '=' From 5f8aeaa2404a5c3e1db9fa145ba41ea933818f15 Mon Sep 17 00:00:00 2001 From: King Date: Mon, 28 May 2018 15:34:51 +0800 Subject: [PATCH 8/8] Update tm.pagination.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 当perPageOptions不使用时，应为 conf.perPageOptions = defaultPerPageOptions; --- src/pagination/tm.pagination.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pagination/tm.pagination.js b/src/pagination/tm.pagination.js index 14d43ee..812a65d 100755 --- a/src/pagination/tm.pagination.js +++ b/src/pagination/tm.pagination.js @@ -58,7 +58,7 @@ angular.module('tm.pagination', []).directive('tmPagination',[function(){ // 分页选项可调整每页显示的条数 if(!conf.perPageOptions){ - conf.perPageOptions = defaultPagesLength; + conf.perPageOptions = defaultPerPageOptions; } // pageList数组