angular分页插件-js教程-PHP中文网

首页

web前端

js教程

angular分页插件

PHP中文网

Jun 19, 2017 pm 05:41 PM

angular使用分页插件

html:

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

js:数据取多次每次翻页都重新取数据

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

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 - 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);

以下是引入的分页插件文件

/*
 * 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>");
}]);

以上是angular分页插件的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

聊聊Angular中的元数据（Metadata）和装饰器（Decorator）Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习，带大家了解一下Angular中的元数据和装饰器，简单了解一下他们的用法，希望对大家有所帮助！

angular学习之详解状态管理器NgRxMay 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx，介绍一下NgRx的使用方法，希望对大家有所帮助！

浅析angular中怎么使用monaco-editorOct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor？下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用，希望对大家有所帮助！

项目过大怎么办？如何合理拆分Angular项目？Jul 26, 2022 pm 07:18 PM

Angular项目过大，怎么合理拆分它？下面本篇文章给大家介绍一下合理拆分Angular项目的方法，希望对大家有所帮助！

Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战，了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统，希望对大家有所帮助！

聊聊自定义angular-datetime-picker格式的方法Sep 08, 2022 pm 08:29 PM

怎么自定义angular-datetime-picker格式？下面本篇文章聊聊自定义格式的方法，希望对大家有所帮助！

聊聊Angular Route中怎么提前获取数据Jul 13, 2022 pm 08:00 PM

Angular Route中怎么提前获取数据？下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法，希望对大家有所帮助！

浅析Angular中的独立组件，看看怎么使用Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件，看看怎么在Angular中创建一个独立组件，怎么在独立组件中导入已有的模块，希望对大家有所帮助！

See all articles

热AI工具

热工具

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），