当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > AngularJs分页插件使用详解

AngularJs分页插件使用详解

2018年08月06日  | 移动技术网IT编程  | 我要评论

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网