plug-in de pagination angulaire-js tutoriel-php.cn

Maison

interface Web

js tutoriel

plug-in de pagination angulaire

Jun 19, 2017 pm 05:41 PM

angular 使用分页插件

html :

&lt;pagination 
total-items= 
ng-model= 
items-per-page= 
previous-text= 
next-text= 
page-sizes= 
edit-page= 
ng-change=&gt;  //获取数据的方法
&lt;/pagination&gt;

Copier après la connexion

js : Récupérez les données plusieurs fois et récupérez les données à chaque fois que vous tournez la page

$scope.currentPage = = = [,, , , = ==($scope.currentPage&gt;&amp;&amp;!  =: $scope.currentPage-=, angular.toJson(=== Math.ceil($scope.totalItems /=

Copier après la connexion

js : situation de pagination : les données ne sont récupérées qu'une seule fois

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

Copier après la connexion

Ce qui suit est le fichier du plug-in de pagination introduit

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

    .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 &lt; 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 &amp;&amp; page &gt; 0 &amp;&amp; page &lt;= $scope.totalPages) {
            ngModelCtrl.$setViewValue(page);
            ngModelCtrl.$render();
          }          if(page==1){
              setTimeout(function () {
                  $(&quot;#paginationNum&quot;).focus();
                  $(&quot;#paginationNum&quot;).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 &gt; value ) {
          $scope.selectPage(value);
        } else {
          ngModelCtrl.$render();
        }
      });

      $scope.checkPage=function(min,max,c) {var current = c;if (typeof current != 'string' || current.length &gt; 0){
            current = current &lt; min ? min : current &gt; max ? max : current;
        }return current;
      };// $scope.keyDown = function (page) {//     var oEvent = window.event;//     if (oEvent.keyCode == 8 &amp;&amp; page == 1) {//         $("#paginationNum").focus();//         $("#paginationNum").select();//     }// };//window.keyDown = function () {var oEvent = window.event;if (oEvent.keyCode == 8 &amp;&amp; $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&amp;&amp;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) &amp;&amp; maxSize &lt; 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 &gt; 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 &lt;= endPage; number++) {              //ignore those unused numbers  if(number == startPage||number == endPage || number &lt; currentPage+10&amp;&amp;number &gt; currentPage-10) {var page = makePage(number, number, number === currentPage);
                pages.push(page);
              }
            }// Add links to move between page setsif ( isMaxSized &amp;&amp; ! rotate ) {              if ( startPage &gt; 1 ) {var previousPageSet = makePage(startPage - 1, '...', false);
                pages.unshift(previousPageSet);
              }              if ( endPage &lt; 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 &gt; 0 &amp;&amp; scope.page &lt;= 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(&quot;template/pagination/pager.html&quot;, []).run([&quot;$templateCache&quot;, function($templateCache) {
  $templateCache.put(&quot;template/pagination/pager.html&quot;,      &quot;&lt;ul class=\&quot;pager\&quot;&gt;\n" +      "  &lt;li ng-class=\&quot;{disabled: noPrevious(), previous: align}\&quot;&gt;&lt;a href ng-click=\&quot;selectPage(page - 1)\&quot;&gt;{{getText('previous')}}&lt;/a&gt;&lt;/li&gt;\n" +      "  &lt;li ng-class=\&quot;{disabled: noNext(), next: align}\&quot;&gt;&lt;a href ng-click=\&quot;selectPage(page + 1)\&quot;&gt;{{getText('next')}}&lt;/a&gt;&lt;/li&gt;\n" +      "&lt;/ul&gt;");
}]);// angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {//   $templateCache.put("template/pagination/pagination.html",//       "&lt;div&gt;\n"+//       "&lt;div class=\&quot;edit\&quot;&gt;&lt;span class=\&quot;total-page\&quot; ng-show=\&quot;editPage\&quot;&gt;&amp;nbsp;共{{totalPages}}页&amp;nbsp;&amp;nbsp;共{{totalItems}}条&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class=\&quot;page-edit\&quot; ng-show=\&quot;editPage\&quot;&gt;第&amp;nbsp;"+//       "&lt;input type=\&quot;text\&quot; ng-model=\&quot;currentPage\&quot; ng-change=\&quot;selectPage(currentPage=checkPage(1,totalPages,currentPage))\&quot;&quot;+//       &quot;requied class=\&quot;table-counts-text\&quot;/&gt;&amp;nbsp;页&lt;/span&gt;&lt;span class=\&quot;page-size-edit\&quot; ng-show=\&quot;pageSizes\&quot;&gt;&amp;nbsp;&amp;nbsp;每页&amp;nbsp;\n"+//       "&lt;select ng-model=\&quot;itemsPerPage\&quot; class=\&quot;table-counts-select\&quot;\n&quot;+//       &quot;ng-options=\&quot;count as count  for count in pageSizes\&quot;&gt;\n"+//       "&lt;/select&gt;&amp;nbsp;条&lt;/span&gt;\n"+//       "&lt;/div&gt;\n"+//       "&lt;ul class=\&quot;pagination\&quot;&gt;\n" +//       "  &lt;li ng-if=\&quot;boundaryLinks\&quot; ng-class=\&quot;{disabled: noPrevious()}\&quot;&gt;&lt;a href ng-click=\&quot;selectPage(1)\&quot;&gt;{{getText('first')}}&lt;/a&gt;&lt;/li&gt;\n" +//       "  &lt;li ng-if=\&quot;directionLinks\&quot; ng-class=\&quot;{disabled: noPrevious()}\&quot;&gt;&lt;a href ng-click=\&quot;selectPage(page - 1)\&quot;&gt;{{getText('previous')}}&lt;/a&gt;&lt;/li&gt;\n" +//       "  &lt;li ng-if=\&quot;page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)&lt;=16\&quot; &quot;+//       &quot;ng-repeat=\&quot;page in pages track by $index\&quot; ng-class=\&quot;{active: page.active}\&quot;&gt;"+//       "&lt;a ng-if=\&quot;page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)&lt;16\&quot; href ng-click=\&quot;selectPage(page.number)\&quot;&gt;{{page.text}}&lt;/a&gt;"+//       "&lt;span ng-if=\&quot;page.number!=1&amp;&amp;page.number!=totalPages&amp;&amp;(page.number-currentPage)*(page.number-currentPage)==16\&quot;&gt;....&lt;/span&gt;&lt;/li&gt;\n" +//       "  &lt;li ng-if=\&quot;directionLinks\&quot; ng-class=\&quot;{disabled: noNext()}\&quot;&gt;&lt;a href ng-click=\&quot;selectPage(page + 1)\&quot;&gt;{{getText('next')}}&lt;/a&gt;&lt;/li&gt;\n" +//       "  &lt;li ng-if=\&quot;boundaryLinks\&quot; ng-class=\&quot;{disabled: noNext()}\&quot;&gt;&lt;a href ng-click=\&quot;selectPage(totalPages)\&quot;&gt;{{getText('last')}}&lt;/a&gt;&lt;/li&gt;\n" +//       "&lt;/ul&gt;&lt;/div&gt;");// }]);angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/pagination/pagination.html",      "&lt;div class=&#39;row&#39;&gt;&lt;div class=&#39;col-sm-4 hidden-xs&#39;&gt;跳至 &lt;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&gt; 页，每页显示&lt;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;&gt;&lt;/select&gt;条&lt;/div&gt;&lt;div class=&#39;col-sm-4 text-center&#39;&gt;&lt;small class=&#39;text-muted inline m-t-sm m-b-sm&#39; ng-show=&#39;editPage&#39;&gt;总共{{totalItems}}条记录&lt;/small&gt;&lt;small class=&#39;text-muted inline m-t-sm m-b-sm&#39; ng-show=&#39;editPage&#39;&gt;/共{{totalPages}}页&lt;/small&gt;&lt;/div&gt;&lt;div class=&#39;col-sm-4 text-right text-center-xs&#39;&gt;&lt;ul class=&#39;pagination m-t-none m-b-none&#39;&gt;&lt;li  ng-if=&#39;boundaryLinks&#39; ng-class=&#39;{disabled: noPrevious()}&#39;&gt;&lt;a href ng-click=&#39;selectPage(1)&#39;&gt;&lt;i class=&#39;fa fa-chevron-left&#39;&gt;&lt;/i&gt;{{getText('first')}}&lt;/a&gt;&lt;/li&gt;&lt;li ng-if=&#39;directionLinks&#39; ng-class=&#39;{disabled: noPrevious()}&#39;&gt;&lt;a href ng-click=&#39;selectPage(page - 1)&#39;&gt;{{getText('previous')}}&lt;/a&gt;&lt;/li&gt;&lt;li ng-if=&#39;page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)&lt;=16&#39; ng-repeat=&#39;page in pages track by $index&#39; ng-class=&#39;{active: page.active}&#39;&gt;&lt;a href  ng-if=&#39;page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)&lt;16&#39; ng-click=&#39;selectPage(page.number)&#39;&gt;{{page.text}}&lt;/a&gt;&lt;span ng-if=&#39;page.number!=1&amp;&amp;page.number!=totalPages&amp;&amp;(page.number-currentPage)*(page.number-currentPage)==16&#39;&gt;....&lt;/span&gt;&lt;/li&gt;&lt;li ng-if=&#39;directionLinks&#39; ng-class=&#39;{disabled: noNext()}&#39;&gt;&lt;a href ng-click=&#39;selectPage(page + 1)&#39;&gt;{{getText('next')}}&lt;/a&gt;&lt;/li&gt;&lt;li ng-if=&#39;boundaryLinks&#39; ng-class=&#39;{disabled: noNext()}&#39;&gt;&lt;a href ng-click=&#39;selectPage(totalPages)&#39;&gt;&lt;i class=&#39;fa fa-chevron-right&#39;&gt;&lt;/i&gt;{{getText('last')}}&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;");
}]);

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn