angular 分页插件的使用

发布时间:2017-7-1 11:45:59编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"angular 分页插件的使用 ",主要涉及到angular 分页插件的使用 方面的内容,对于angular 分页插件的使用 感兴趣的同学可以参考一下。

html:

<pagination 
total-items="totalItems"
ng-model="currentPage"
items-per-page="itemPerPage"
previous-text="上一页"
next-text="下一页"
page-sizes="pageSizes"
edit-page="editPage"
ng-change="getData(currentPage,itemPerPage)"> //获取数据的方法
</pagination>

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

        // 分页:数据取多次 每次翻页都重新取数据        $scope.currentPage = 1;        $scope.itemPerPage = 2;        $scope.pageSizes = [2,10, 20, 50, 100];        $scope.editPage = true;        $scope.progressing=false;        $scope.getData = function (currentPage, itemPerPage) {            if($scope.currentPage>0&&!$scope.progressing) {                var params = {                    'pageIndex': $scope.currentPage-0,                    'pageSize': $scope.itemPerPage,                    'insuranceOrgCode': $scope.insuranceOrgCode,//接口参数
}; $scope.progressing=true; $http.post('/product/getProductList.do', angular.toJson(params)).success(function (res) { $scope.dataList = res.data.listObj;//接口取值后,赋值于变量 $scope.totalItems = res.data.total; $scope.pageCount = Math.ceil($scope.totalItems / itemPerPage); $scope.progressing=false; }) } }; $scope.getData();//页面进来,默认查询

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('ui.bootstrap.pagination', ["template/pagination/pager.html","template/pagination/pagination.html"])    .controller('PaginationController', ['$scope', '$attrs', '$parse', 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!='')          $scope.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;      };      $scope.selectPage = function(page) {        console.log('page:',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='1');        }      };      $scope.getText = function( key ) {        return $scope[key + 'Text'] || self.config[key + 'Text'];      };      $scope.noPrevious = function() {        return $scope.page === 1;      };      $scope.noNext = function() {        return $scope.page === $scope.totalPages;      };      $scope.$watch('totalItems', function() {        $scope.totalPages = self.calculateTotalPages();      });      $scope.$watch('totalPages', function(value) {        setNumPages($scope.$parent, value); // Readonly variable        if ( $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 limits            var startPage = 1, endPage = totalPages;            var isMaxSized = ( angular.isDefined(maxSize) && maxSize < totalPages );            // recompute if maxSize            if ( isMaxSized ) {              if ( rotate ) {                // Current page is displayed in the middle of the visible ones                startPage = Math.max(currentPage - Math.floor(maxSize/2), 1);                endPage   = startPage + maxSize - 1;                // Adjust if limit is exceeded                if (endPage > totalPages) {                  endPage   = totalPages;                  startPage = endPage - maxSize + 1;                }              } else {                // Visible pages are paginated with maxSize                startPage = ((Math.ceil(currentPage / maxSize) - 1) * maxSize) + 1;                // Adjust last page if limit is exceeded                endPage = Math.min(startPage + maxSize - 1, totalPages);              }            }            // Add page number links            for (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 sets            if ( isMaxSized && ! rotate ) {              if ( startPage > 1 ) {                var previousPageSet = makePage(startPage - 1, '...', false);                pages.unshift(previousPageSet);              }              if ( endPage < totalPages ) {                var nextPageSet = makePage(endPage + 1, '...', 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('pagerConfig', {      itemsPerPage: 10,      previousText: '« Previous',      nextText: 'Next »',      align: true    })    .directive('pager', ['pagerConfig', function(pagerConfig) {      return {        restrict: 'EA',        scope: {          totalItems: '=',          previousText: '@',          nextText: '@'        },        require: ['pager', '?ngModel'],        controller: 'PaginationController',        templateUrl: 'template/pagination/pager.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.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\">&nbsp;共{{totalPages}}页&nbsp;&nbsp;共{{totalItems}}条&nbsp;&nbsp;</span><span class=\"page-edit\" ng-show=\"editPage\">第&nbsp;"+//       "<input type=\"text\" ng-model=\"currentPage\" ng-change=\"selectPage(currentPage=checkPage(1,totalPages,currentPage))\""+//       "requied class=\"table-counts-text\"/>&nbsp;页</span><span class=\"page-size-edit\" ng-show=\"pageSizes\">&nbsp;&nbsp;每页&nbsp;\n"+//       "<select ng-model=\"itemsPerPage\" class=\"table-counts-select\"\n"+//       "ng-options=\"count as count  for count in pageSizes\">\n"+//       "</select>&nbsp;条</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='row'><div class='col-sm-4 hidden-xs'>跳至 <input type='number' id='paginationNum' class='input-sm form-control inline v-middle text-center' style='width: 50px' ng-model='currentPage' ng-pattern='/^[0-9]+$/' ng-change='selectPage(currentPage=checkPage(1,totalPages,currentPage))' requied> 页,每页显示<select class='form-control input-sm' style='width: 100px;display: inline-block'  ng-model='itemsPerPage'  ng-options='count as count  for count in pageSizes'></select>条</div><div class='col-sm-4 text-center'><small class='text-muted inline m-t-sm m-b-sm' ng-show='editPage'>总共{{totalItems}}条记录</small><small class='text-muted inline m-t-sm m-b-sm' ng-show='editPage'>/共{{totalPages}}页</small></div><div class='col-sm-4 text-right text-center-xs'><ul class='pagination m-t-none m-b-none'><li  ng-if='boundaryLinks' ng-class='{disabled: noPrevious()}'><a href ng-click='selectPage(1)'><i class='fa fa-chevron-left'></i>{{getText('first')}}</a></li><li ng-if='directionLinks' ng-class='{disabled: noPrevious()}'><a href ng-click='selectPage(page - 1)'>{{getText('previous')}}</a></li><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 href  ng-if='page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<16' 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><li ng-if='directionLinks' ng-class='{disabled: noNext()}'><a href ng-click='selectPage(page + 1)'>{{getText('next')}}</a></li><li ng-if='boundaryLinks' ng-class='{disabled: noNext()}'><a href ng-click='selectPage(totalPages)'><i class='fa fa-chevron-right'></i>{{getText('last')}}</a></li></ul></div></div>");}]);



上一篇:java的foreach,后台弹框
下一篇:不同操作系统的宏定义区分

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款