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=\"‹\" next-text=\"›\" first-text=\"«\" last-text=\"»\"></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
  };
 }]);

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