AngularJs分页插件使用详解


            angularUI bootstrap提供的分页插件满足了大部分应用的需求，具体内容如下

在项目需求中，新增了两个需求：

1.自由设定每页显示的条目；

2.可以手动输入页面，跳转到指定的页数。

html代码





<div class="pagination-define p20 mt20" ng-hide="totalItems==0">

 <select ng-model="perPageSize" ng-change="pageChanged({currentPage:currentPage,perPageSize:perPageSize})" >

  <option value=10 ng-selected="perPageSize==10">10</option>

  <option value=20>20</option>

  <option value=30>30</option>

  <option value=50>50</option>

  <option value=100>100</option>

 </select>

 <uib-pagination items-per-page="numPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged({currentPage:currentPage,perPageSize:perPageSize})" max-size="5" class="pagination-sm" boundary-link-numbers="true" boundary-links="true" rotate="false" previous-text="&#8249;" next-text="&#8250;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>

 <input type="text" ng-model="inputCurPage" min=1 cus-max-number ="{{maxPages}}" current-page="{{currentPage}}">

 <button class="btn btn-info btn-30h" ng-click="pageChanged({currentPage:inputCurPage,perPageSize:perPageSize})" ng-disabled="inputCurPage==''||submitting">Go</button>

</div>



css代码







.pagination-define{

 text-align: center

}

.pagination-define input, .pagination-define select {

 padding-left: 3px;

 height: 30px;

 vertical-align: top;

 border: 1px solid #ccc;

 border-radius: 4px;

 width: 50px;

}

.pagination {

 margin: 0;

}

.pagination-define .btn-30h {

 vertical-align: top;

}

.btn-30h {

 padding-top: 4px;

 padding-bottom: 4px;

}



Javascript代码







app.directive('cusMaxNumber', ['$timeout', function ($timeout) {

  return {

   restrict: 'EA',

   require: 'ngModel',

   scope: {

    maxNumber: '@cusMaxNumber',

    currentPage: '@currentPage'

   },

   link: function (scope, element, attr, ctrl) {

    ctrl.$parsers.push(function (viewValue) {

     var maxNumber = parseInt(scope.maxNumber, 10);

     var curNumber = scope.currentPage; //当前页数

     var transformedInput = viewValue.replace(/[^0-9]/g, '');

     if (transformedInput !== viewValue||parseInt(transformedInput,10)<1||parseInt(transformedInput,10)>maxNumber) {

      ctrl.$setViewValue(curNumber);

      ctrl.$render();

      return curNumber;

     }

     return viewValue;

    });

   }

  };

 }])

.directive('cusPagination',[function(){

  return {

   restrict: "E",

   templateUrl: 'views/template/pagination.html',

   scope: {

    numPerPage: "=numPerPage",

    totalItems: "=totalItems",

    currentPage: "=cusCurrentPage",

    perPageSize:"=perPageSize",

    inputCurPage:"=inputCurPage",

    maxPages:"=maxPages",

    pageChanged: "&pageChanged"

   },

   replace: false

  };

 }]);



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。