angularjs 分页指令编写

来源：互联网发布：用户网络数据监控编辑：程序博客网时间：2024/06/06 01:20

分页效果：

分页说明

分页使用的样式基于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, 20, 30, 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);}

0 0