分页说明
分页使用的样式基于bootstrap样式。
分页模板
<div class="btn-group-sm pull-right"> <button type="button" class="btn btn-default btn-sm" ng-disabled="options.pageNumber==1 || options.pageTotal==0" ng-click="pageChanged('fristPage');"><i class="fa fa-angle-left" ></i></button> <button type="button" class="btn btn-default btn-sm" ng-disabled="options.pageNumber==1 || options.pageTotal==0" ng-click="pageChanged('prevIoUsPage');"><i class="fa fa-angle-double-left" ></i></button> <button type="button" class="btn btn-default btn-sm" ng-disabled="options.pageTotal==0" ng-click="pageChanged('refresh');"><i class="fa fa-refresh"></i></button> <button type="button" class="btn btn-default btn-sm" ng-disabled="options.pageNumber==options.pageTotal || options.pageTotal==0" ng-click="pageChanged('nextPage');"><i class="fa fa-angle-double-right" ></i></button> <button type="button" class="btn btn-default btn-sm" ng-disabled="options.pageNumber==options.pageTotal || options.pageTotal==0" ng-click="pageChanged('lastPage');"><i class="fa fa-angle-right" ></i></button> </div> <div class="btn-group pull-left" style="margin-top:5px"> 显示 <span ng-bind="options.pageTotal"></span> 页, <span class="dropup" ng-if="options.pageTotal>0"> 每页 <a href="" data-toggle="dropdown"> <span ng-bind="options.pageSize"></span> <span class="caret"></span> </a>条数据, <ul class="dropdown-menu"> <li ng-repeat="item in options.pageList"> <a href="" ng-bind="item" ng-click="pageSizeChanged(item);"></a> </li> </ul> </span> <span class="dropup" ng-if="options.pageTotal<=0"> 每页<span ng-bind="options.pageSize"></span> 条数据, </span> 当前第 <span ng-bind="options.pageNumber"></span> 页,共条 <span ng-bind="options.total"></span> 条数据 </div>
/** * 分页 * 参数: * options:{ * total:0,* pageList: [10,20,30,50] * } * * onPageChanged:function(type,pageParam){ * * } * */ angular.module('cjhme.pagination',[]) .directive('cjhmePagination',[function() { return { scope: { options: '=options',onPageChanged: '&onpagechanged' },replace: false,templateUrl: 'module/directive/pagination/pagination.html',link: function($scope,$element,$attrs) { var opts = { total: 0,pageList: [10,50,100,150,200] }; //初始化分页 function initPagination() { if($scope.options && $scope.options.pageList && $scope.options.pageList.length <= 0) { $scope.options.pageList = opts.pageList; } angular.extend(opts,$scope.options); opts.pageSize = opts.pageList[0]; $scope.options = opts; refreshPagination($scope); } //刷新分页 function refreshPagination() { $scope.options.pageTotal = 0; if(parseInt($scope.options.total) % parseInt($scope.options.pageSize) == 0) { $scope.options.pageTotal = parseInt(parseInt($scope.options.total) / parseInt($scope.options.pageSize)); } else { $scope.options.pageTotal = parseInt((parseInt($scope.options.total) / parseInt($scope.options.pageSize)) + 1); } if($scope.options.pageTotal <= 0) { $scope.options.pageNumber = 0; } else { $scope.options.pageNumber = 1; } } //下一页 function nextPage() { $scope.options.pageNumber++; if($scope.options.pageNumber > $scope.options.pageTotal) { $scope.options.pageNumber = $scope.options.pageTotal; } } //上一页 function prevIoUsPage() { $scope.options.pageNumber--; if($scope.options.pageNumber <= 0) { $scope.options.pageNumber = 1 } } //最后一页 function lastPage() { $scope.options.pageNumber = $scope.options.pageTotal; } //第一页 function fristPage() { $scope.options.pageNumber = 1; } //分页操作 function onPageChanged(type) { var pageParam = { pageNumber: $scope.options.pageNumber,pageSize: $scope.options.pageSize,pageTotal: $scope.options.pageTotal,total: $scope.options.total } $scope.onPageChanged()(type,pageParam); } //分页改变 $scope.pageChanged = function(type) { switch(type) { case 'nextPage': nextPage(); break; case 'lastPage': lastPage(); break; case 'prevIoUsPage': prevIoUsPage(); break; case 'fristPage': fristPage(); break; } onPageChanged(type); } //页数改变 $scope.pageSizeChanged = function(curSize) { $scope.options.pageSize = curSize; refreshPagination(); onPageChanged("pageSizeChange"); } $scope.$watch('options',function(newVal,oldVal) { initPagination() }) } }; }]);
分页使用:
html页面使用时:<div cjhme-pagination options="pagerConfig" onPageChanged="pagerChange"></div>
controller中首先引入:cjhme.pagination,使用时配置如下参数:
//分页 $scope.pagerConfig = { total: 30,pageList: [15,25,35] } $scope.pagerChange = function(type,pageParam) { console.info(type); console.info(pageParam); }原文链接:https://www.f2er.com/angularjs/149057.html