masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

angular分页插件

PHP中文网
Lepaskan： 2017-06-19 17:41:28
asal
1462 orang telah melayarinya

 

html:

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

 

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

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

 

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);
Salin selepas log masuk

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

/*
 * 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>");
}]);
Salin selepas log masuk

 

Atas ialah kandungan terperinci angular分页插件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
angular 使用 分页 插件
sumber：php.cn
Artikel sebelumnya：一个简单的小动画效果 Artikel seterusnya：jQuery效果 - 简单的手风琴效果
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Sudut 7 alih keluar atribut pendua dalam SCSS AngularSASS (.scss) menjalurkan sifat. Bagaimanakah saya boleh menghalang perkara ini dari...
daripada 2024-04-04 23:28:54
0
1
1382
Ralat dilemparkan apabila mengimport pembina prototaip Javascript dalam aplikasi Angular Saya mempunyai aplikasi Angular di mana saya cuba mengimport fail JS yang mempunyai pembin...
daripada 2024-04-04 11:36:15
0
1
288
Menjana kandungan menggunakan Ajax - menatal ke Id tidak berfungsi Saya menjana kandungan halaman berdasarkan data yang diperoleh melalui ajax. Masalah yang ...
daripada 2024-04-04 09:29:39
0
1
397
Buat penyeret suhu SVG bulat dalam Angular? Berikut ialah demonstrasi statik penyeret ibu jari bulat yang saya cuba buat dalam Angular...
daripada 2024-04-03 09:33:29
0
1
376
Sudut: Pengikatan sifat untuk memahami warna elemen teks tidak mempunyai kereaktifan Berikut ialah fail .ts saya, import{Component}from'@angular/core';@Component({selector:'ap...
daripada 2024-04-01 17:28:52
0
1
358
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan