Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

angular paging plug-in

PHP中文网
Release： 2017-06-19 17:41:28
Original
1461 people have browsed it

html:

<pagination 
total-items= 
ng-model= 
items-per-page= 
previous-text= 
next-text= 
page-sizes= 
edit-page= 
ng-change=>  //获取数据的方法
</pagination>
Copy after login

js: Fetch data multiple times and re-fetch data every time you turn the page

$scope.currentPage = = = [,, , , = ==($scope.currentPage>&&!  =: $scope.currentPage-=, angular.toJson(=== Math.ceil($scope.totalItems /=
Copy after login

js: Pagination situation: data is only fetched once

// 分页情况:数据只取一次
        ($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);
Copy after login

The following is the introduced paging plug-in file

/*
 * 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(&#39;ui.bootstrap.pagination&#39;, ["template/pagination/pager.html","template/pagination/pagination.html"])

    .controller(&#39;PaginationController&#39;, [&#39;$scope&#39;, &#39;$attrs&#39;, &#39;$parse&#39;, 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!=&#39;&#39;)
          $scope.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
      };

      $scope.selectPage = function(page) {
        console.log(&#39;page:&#39;,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=&#39;1&#39;);

        }
      };


      $scope.getText = function( key ) {return $scope[key + &#39;Text&#39;] || self.config[key + &#39;Text&#39;];
      };
      $scope.noPrevious = function() {return $scope.page === 1;
      };
      $scope.noNext = function() {return $scope.page === $scope.totalPages;
      };

      $scope.$watch(&#39;totalItems&#39;, function() {
        $scope.totalPages = self.calculateTotalPages();
      });
      $scope.$watch(&#39;totalPages&#39;, 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, &#39;...&#39;, 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(&#39;pagerConfig&#39;, {
      itemsPerPage: 10,
      previousText: &#39;« Previous&#39;,
      nextText: &#39;Next »&#39;,
      align: true})

    .directive(&#39;pager&#39;, [&#39;pagerConfig&#39;, function(pagerConfig) {      return {
        restrict: &#39;EA&#39;,
        scope: {
          totalItems: &#39;=&#39;,
          previousText: &#39;@&#39;,
          nextText: &#39;@&#39;},
        require: [&#39;pager&#39;, &#39;?ngModel&#39;],
        controller: &#39;PaginationController&#39;,
        templateUrl: &#39;template/pagination/pager.html&#39;,
        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=&#39;row&#39;><div class=&#39;col-sm-4 hidden-xs&#39;>跳至 <input type=&#39;number&#39; id=&#39;paginationNum&#39; class=&#39;input-sm form-control inline v-middle text-center&#39; style=&#39;width: 50px&#39; ng-model=&#39;currentPage&#39; ng-pattern=&#39;/^[0-9]+$/&#39; ng-change=&#39;selectPage(currentPage=checkPage(1,totalPages,currentPage))&#39; requied> 页，每页显示<select class=&#39;form-control input-sm&#39; style=&#39;width: 100px;display: inline-block&#39;  ng-model=&#39;itemsPerPage&#39;  ng-options=&#39;count as count  for count in pageSizes&#39;></select>条</div><div class=&#39;col-sm-4 text-center&#39;><small class=&#39;text-muted inline m-t-sm m-b-sm&#39; ng-show=&#39;editPage&#39;>总共{{totalItems}}条记录</small><small class=&#39;text-muted inline m-t-sm m-b-sm&#39; ng-show=&#39;editPage&#39;>/共{{totalPages}}页</small></div><div class=&#39;col-sm-4 text-right text-center-xs&#39;><ul class=&#39;pagination m-t-none m-b-none&#39;><li  ng-if=&#39;boundaryLinks&#39; ng-class=&#39;{disabled: noPrevious()}&#39;><a href ng-click=&#39;selectPage(1)&#39;><i class=&#39;fa fa-chevron-left&#39;></i>{{getText('first')}}</a></li><li ng-if=&#39;directionLinks&#39; ng-class=&#39;{disabled: noPrevious()}&#39;><a href ng-click=&#39;selectPage(page - 1)&#39;>{{getText('previous')}}</a></li><li ng-if=&#39;page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<=16&#39; ng-repeat=&#39;page in pages track by $index&#39; ng-class=&#39;{active: page.active}&#39;><a href  ng-if=&#39;page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<16&#39; ng-click=&#39;selectPage(page.number)&#39;>{{page.text}}</a><span ng-if=&#39;page.number!=1&&page.number!=totalPages&&(page.number-currentPage)*(page.number-currentPage)==16&#39;>....</span></li><li ng-if=&#39;directionLinks&#39; ng-class=&#39;{disabled: noNext()}&#39;><a href ng-click=&#39;selectPage(page + 1)&#39;>{{getText('next')}}</a></li><li ng-if=&#39;boundaryLinks&#39; ng-class=&#39;{disabled: noNext()}&#39;><a href ng-click=&#39;selectPage(totalPages)&#39;><i class=&#39;fa fa-chevron-right&#39;></i>{{getText('last')}}</a></li></ul></div></div>");
}]);
Copy after login

The above is the detailed content of angular paging plug-in. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
angular use Pagination plug-in
source：php.cn
Previous article：A simple little animation effect Next article：jQuery效果 - 简单的手风琴效果
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Angular 7 remove duplicate attributes in SCSS AngularSASS (.scss) strips properties. How do I prevent this from happening so I can embed...
From 2024-04-04 23:28:54
0
1
1382
An error is thrown when importing Javascript prototype constructor in Angular application I have an Angular application where I'm trying to import a JS file that has a constructor....
From 2024-04-04 11:36:15
0
1
288
Generating content using Ajax - scrolling to Id doesn't work I generate page content based on data obtained via ajax. The problem I'm having is that wh...
From 2024-04-04 09:29:39
0
1
397
Create a circular SVG temperature dragger in Angular? Here is a static demonstration of a circular thumb dragger I'm trying to create in Angular...
From 2024-04-03 09:33:29
0
1
376
Angular: Property binding to understand text element color lacks reactivity The following is my .ts file, import{Component}from'@angular/core';@Component({selector:'a...
From 2024-04-01 17:28:52
0
1
358
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template