Merge pull request #1098 from wknet123/dev-revised-pagination

Update pagination component. need more test
2025-04-17 10:24:33 +00:00 · 2016-11-17 13:45:20 +08:00 · 2016-11-17 13:45:20 +08:00 · fb3f001a47
commit fb3f001a47
parent 3be2fb7733 8a536ea892
2 changed files with 326 additions and 34 deletions
--- a/src/ui/static/resources/js/components/paginator/paginator.directive.html
+++ b/src/ui/static/resources/js/components/paginator/paginator.directive.html
@ -1,13 +1,23 @@
 <nav aria-label="Page navigation" class="pull-left">
-  <ul class="pagination" style="margin: 0;">
-    <li>
-      <a href="javascript:void(0);" ng-click="vm.previous()" aria-label="Previous">
-        <span aria-hidden="true">&laquo;</span>
+  <ul class="pagination" style="margin: 0 0 0 10px;">
+    <li ng-class="vm.disabledFirst" ng-show="vm.visible">
+      <a href="javascript:void(0);" ng-click="vm.gotoFirst()" aria-label="Previous">
+        <span aria-hidden="true">&lt;&lt;</span>
      </a>
    </li>
-    <li>
+    <li ng-class="vm.disabledPrevious" ng-show="vm.visible">
+      <a href="javascript:void(0);" ng-click="vm.previous()" aria-label="Previous">
+        <span aria-hidden="true">&lt;</span>
+      </a>
+    </li>
+    <li ng-class="vm.disabledNext" ng-show="vm.visible">
      <a href="javascript:void(0);" ng-click="vm.next()" aria-label="Next">
-        <span aria-hidden="true">&raquo;</span>
+        <span aria-hidden="true">&gt;</span>
+      </a>
+    </li>
+    <li ng-class="vm.disabledLast" ng-show="vm.visible">
+      <a href="javascript:void(0);" ng-click="vm.gotoLast()" aria-label="Next">
+        <span aria-hidden="true">&gt;&gt;</span>
      </a>
    </li>
  </ul>
--- a/src/ui/static/resources/js/components/paginator/paginator.directive.js
+++ b/src/ui/static/resources/js/components/paginator/paginator.directive.js
@ -32,7 +32,6 @@
    return directive;
    
    function link(scope, element, attrs, ctrl) {
-      
      scope.$watch('vm.page', function(current) {
        if(current) { 
          ctrl.page = current;
@ -45,34 +44,43 @@
      scope.$watch('vm.totalCount', function(current) {
        if(current) {
          var totalCount   = current;   
-                                              
-          element.find('ul li:first a').off('click');
-          element.find('ul li:last a').off('click');
-                    
+                                                                  
          tc = new TimeCounter();
          
          console.log('Total Count:' + totalCount + ', Page Size:' + ctrl.pageSize + ', Display Count:' + ctrl.displayCount + ', Page:' + ctrl.page);

          ctrl.buttonCount = Math.ceil(totalCount / ctrl.pageSize);
-                                
+          
          if(ctrl.buttonCount <= ctrl.displayCount) {
            tc.setMaximum(1);
+            ctrl.visible = false;
          }else{
            tc.setMaximum(Math.ceil(ctrl.buttonCount / ctrl.displayCount));
+            ctrl.visible = true;
          }
                   
-          element.find('ul li:first a').on('click', previous);          
-          element.find('ul li:last a').on('click', next);          
-          
+          ctrl.gotoFirst = gotoFirst;
+          ctrl.gotoLast = gotoLast;
+
+          if(ctrl.buttonCount < ctrl.page) {
+            ctrl.page = ctrl.buttonCount;
+          }                   
+                    
+          ctrl.previous = previous;    
+          ctrl.next = next;
+                    
          drawButtons(tc.getTime());    

          togglePrevious(tc.canDecrement());
          toggleNext(tc.canIncrement());
+                    
+          toggleFirst();
+          toggleLast();
          
          togglePageButton();
          
        }
-      }); 
+      });

      var TimeCounter = function() {
        this.time = 0;
@ -84,6 +92,10 @@
        this.maximum = maximum;
      };
      
+      TimeCounter.prototype.getMaximum = function() {
+        return this.maximum;
+      };
+      
      TimeCounter.prototype.increment = function() {
        if(this.time < this.maximum) {
          ++this.time;
@ -92,7 +104,6 @@
          }
          ++ctrl.page;
        }
-        scope.$apply();
      };
      
      TimeCounter.prototype.canIncrement = function() {
@ -111,7 +122,6 @@
          }
          --this.time;
        }
-        scope.$apply();
      };
      
      TimeCounter.prototype.canDecrement = function() {
@ -124,6 +134,10 @@
      TimeCounter.prototype.getTime = function() {
        return this.time;
      };
+      
+      TimeCounter.prototype.setTime = function(time) {
+        this.time = time;
+      };
                 
      function drawButtons(time) {
        element.find('li[tag="pagination-button"]').remove();
@ -134,32 +148,38 @@
            buttons.push('<li tag="pagination-button"><a href="javascript:void(0)" page="' + displayNumber + '">' + displayNumber + '<span class="sr-only"></span></a></li>');
          }
        }
+        
        $(buttons.join(''))
-          .insertAfter(element.find('ul li:eq(0)')).end()
+          .insertAfter(element.find('ul li:eq(' + (ctrl.visible ? 1 : 0) + ')')).end()
          .on('click', buttonClickHandler); 
      }
      
      function togglePrevious(status) {
-        if(status){
-          element.find('ul li:first').removeClass('disabled');
-        }else{
-          element.find('ul li:first').addClass('disabled');
-        }
-      }
-                    
+        ctrl.disabledPrevious = status ? '' : 'disabled';    
+        toggleFirst();
+        toggleLast();    
+      }          
+                   
      function toggleNext(status) {
-        if(status) {
-          element.find('ul li:last').removeClass('disabled');
-        }else{
-          element.find('ul li:last').addClass('disabled');
-        } 
+        ctrl.disabledNext = status ? '' : 'disabled';        
+        toggleFirst();
+        toggleLast();
+      }
+      
+      function toggleFirst() {
+        ctrl.disabledFirst = (ctrl.page > 1) ? '' : 'disabled';
+      }
+      
+      function toggleLast() {
+        ctrl.disabledLast = (ctrl.page < ctrl.buttonCount) ? '' : 'disabled';
      }
          
      function buttonClickHandler(e) {
-        ctrl.page = $(e.target).attr('page');
+        ctrl.page = $(e.target).attr('page');              
        togglePageButton();                                      
        togglePrevious(tc.canDecrement());
        toggleNext(tc.canIncrement());
+       
        scope.$apply();
      }  
          
@ -176,8 +196,232 @@
          togglePrevious(tc.canDecrement());
          toggleNext(tc.canIncrement());
        }
-        scope.$apply(); 
      }      
+      
+      function gotoFirst() {     
+        ctrl.page = 1;
+        tc.setTime(0);
+        drawButtons(0);
+        
+        toggleFirst();
+        toggleLast();
+        
+        togglePageButton();
+        togglePrevious(tc.canDecrement());
+        toggleNext(tc.canIncrement());
+      }
+          (function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.paginator')
+    .directive('paginator', paginator);
+    
+  PaginatorController.$inject = [];
+  
+  function PaginatorController() {
+    var vm = this;   
+  }
+  
+  paginator.$inject = [];
+  
+  function paginator() {
+    var directive = {
+      'restrict': 'E',
+      'templateUrl': '/static/resources/js/components/paginator/paginator.directive.html',
+      'scope': {
+        'totalCount': '@',
+        'pageSize': '@',
+        'page': '=',
+        'displayCount': '@'
+      },
+      'link': link,
+      'controller': PaginatorController,
+      'controllerAs': 'vm',
+      'bindToController': true
+    };
+    return directive;
+    
+    function link(scope, element, attrs, ctrl) {
+      scope.$watch('vm.page', function(current) {
+        if(current) { 
+          ctrl.page = current;
+          togglePageButton();
+        }
+      });
+      
+      var tc;
+                        
+      scope.$watch('vm.totalCount', function(current) {
+        if(current) {
+          var totalCount   = current;   
+                                                                  
+          tc = new TimeCounter();
+          
+          console.log('Total Count:' + totalCount + ', Page Size:' + ctrl.pageSize + ', Display Count:' + ctrl.displayCount + ', Page:' + ctrl.page);
+
+          ctrl.buttonCount = Math.ceil(totalCount / ctrl.pageSize);
+          
+          if(ctrl.buttonCount <= ctrl.displayCount) {
+            tc.setMaximum(1);
+            ctrl.visible = false;
+          }else{
+            tc.setMaximum(Math.ceil(ctrl.buttonCount / ctrl.displayCount));
+            ctrl.visible = true;
+          }
+                   
+          ctrl.gotoFirst = gotoFirst;
+          ctrl.gotoLast = gotoLast;
+
+          if(ctrl.buttonCount < ctrl.page) {
+            ctrl.page = ctrl.buttonCount;
+          }                   
+                    
+          ctrl.previous = previous;    
+          ctrl.next = next;
+                    
+          drawButtons(tc.getTime());    
+
+          togglePrevious(tc.canDecrement());
+          toggleNext(tc.canIncrement());
+                    
+          toggleFirst();
+          toggleLast();
+          
+          togglePageButton();
+          
+        }
+      });
+
+      var TimeCounter = function() {
+        this.time = 0;
+        this.minimum = 0;
+        this.maximum = 0;
+      };
+      
+      TimeCounter.prototype.setMaximum = function(maximum) {
+        this.maximum = maximum;
+      };
+      
+      TimeCounter.prototype.getMaximum = function() {
+        return this.maximum;
+      };
+      
+      TimeCounter.prototype.increment = function() {
+        if(this.time < this.maximum) {
+          ++this.time;
+          if((ctrl.page % ctrl.displayCount) != 0) {
+            ctrl.page = this.time * ctrl.displayCount;
+          }
+          ++ctrl.page;
+        }
+      };
+      
+      TimeCounter.prototype.canIncrement = function() {
+        if(this.time + 1 < this.maximum) {
+          return true;
+        }
+        return false;
+      };
+      
+      TimeCounter.prototype.decrement = function() {
+        if(this.time > this.minimum) {         
+          if(this.time === 0) {
+            ctrl.page = ctrl.displayCount;
+          }else{
+            ctrl.page =  this.time * ctrl.displayCount;
+          }
+          --this.time;
+        }
+      };
+      
+      TimeCounter.prototype.canDecrement = function() {
+        if(this.time > this.minimum) {
+          return true;
+        }
+        return false;
+      };
+      
+      TimeCounter.prototype.getTime = function() {
+        return this.time;
+      };
+      
+      TimeCounter.prototype.setTime = function(time) {
+        this.time = time;
+      };
+                 
+      function drawButtons(time) {
+        element.find('li[tag="pagination-button"]').remove();
+        var buttons = [];
+        for(var i = 1; i <= ctrl.displayCount; i++) {
+          var displayNumber = ctrl.displayCount * time + i;
+          if(displayNumber <= ctrl.buttonCount) {
+            buttons.push('<li tag="pagination-button"><a href="javascript:void(0)" page="' + displayNumber + '">' + displayNumber + '<span class="sr-only"></span></a></li>');
+          }
+        }
+        
+        $(buttons.join(''))
+          .insertAfter(element.find('ul li:eq(' + (ctrl.visible ? 1 : 0) + ')')).end()
+          .on('click', buttonClickHandler); 
+      }
+      
+      function togglePrevious(status) {
+        ctrl.disabledPrevious = status ? '' : 'disabled';    
+        toggleFirst();
+        toggleLast();    
+      }          
+                   
+      function toggleNext(status) {
+        ctrl.disabledNext = status ? '' : 'disabled';        
+        toggleFirst();
+        toggleLast();
+      }
+      
+      function toggleFirst() {
+        ctrl.disabledFirst = (ctrl.page > 1) ? '' : 'disabled';
+      }
+      
+      function toggleLast() {
+        ctrl.disabledLast = (ctrl.page < ctrl.buttonCount) ? '' : 'disabled';
+      }
+          
+      function buttonClickHandler(e) {
+        ctrl.page = $(e.target).attr('page');              
+        togglePageButton();                                      
+        togglePrevious(tc.canDecrement());
+        toggleNext(tc.canIncrement());
+       
+        scope.$apply();
+      }  
+          
+      function togglePageButton() {
+        element.find('li[tag="pagination-button"]').removeClass('active');
+        element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').parent().addClass('active');
+      }          
+         
+      function previous() {
+        if(tc.canDecrement()) {
+          tc.decrement();
+          drawButtons(tc.getTime());
+          togglePageButton();
+          togglePrevious(tc.canDecrement());
+          toggleNext(tc.canIncrement());
+        }
+      }      
+      
+      function gotoFirst() {     
+        ctrl.page = 1;
+        tc.setTime(0);
+        drawButtons(0);
+        
+        toggleFirst();
+        toggleLast();
+        
+        togglePageButton();
+        togglePrevious(tc.canDecrement());
+        toggleNext(tc.canIncrement());
+      }
          
      function next() {
        if(tc.canIncrement()) {    
@ -187,7 +431,45 @@
          togglePrevious(tc.canDecrement());
          toggleNext(tc.canIncrement());
        }
-        scope.$apply();
+      }
+      
+      function gotoLast() {
+        ctrl.page = ctrl.buttonCount;
+        tc.setTime(Math.ceil(ctrl.buttonCount / ctrl.displayCount) - 1);
+        drawButtons(tc.getTime()); 
+        
+        toggleFirst();
+        toggleLast();
+        
+        togglePageButton();
+        togglePrevious(tc.canDecrement());
+        toggleNext(tc.canIncrement());
+      }
+    }
+  }
+  
+})();
+      function next() {
+        if(tc.canIncrement()) {    
+          tc.increment();
+          drawButtons(tc.getTime());     
+          togglePageButton();
+          togglePrevious(tc.canDecrement());
+          toggleNext(tc.canIncrement());
+        }
+      }
+      
+      function gotoLast() {
+        ctrl.page = ctrl.buttonCount;
+        tc.setTime(Math.ceil(ctrl.buttonCount / ctrl.displayCount) - 1);
+        drawButtons(tc.getTime()); 
+        
+        toggleFirst();
+        toggleLast();
+        
+        togglePageButton();
+        togglePrevious(tc.canDecrement());
+        toggleNext(tc.canIncrement());
      }
    }
  }