// // // 'use strict'; // angular.module('pagination', []).directive("pagination", function() { // return { restrict: 'EA', replace: true, scope: { option: '=pageOption', query: '&', pageable: '=' }, template: '<div class="row navigation_box" style="padding:15px">' + ' <div class="pull-right">' + ' <ul class="pagination">' + ' <li><span><span ng-bind="$root.i18n.total_elements">总数</span>:<b ng-bind="option.totalElements"></b></span></li>' + ' <li><span><span ng-bind="$root.i18n.total_page">页数</span>:<b ng-bind="option.totalPages"></b></span></li>' + ' </ul>' + ' </div>' + ' <div class="pull-right" style="margin-right: 26px">' + ' <nav aria-label="Page navigation">' + ' <ul class="pagination">' + ' <!-- 当前 加active 不能点击 disabled -->' + ' <li class="first" ng-class="isFirst() && \'disabled\'"><a href="javascript:void(0)" ng-click="pre()" ng-bind="$root.i18n.previous_page">上一页</a></li>' + ' <li ng-repeat="p in page" ng-class="option.number==(p -1) && \'active\'"><a href="javascript:void(0)" ng-click="pageClick(p)">{{p}}</a></li>' + ' <li class="last" ng-class="isLast() && \'disabled\'"><a href="javascript:void(0)" ng-click="next()" ng-bind="$root.i18n.next_page">下一页</a></li>' + ' </ul>' + ' </nav>' + ' </div>' + '</div>', link: function($scope) { // $scope.option.$promise.then(function() { // //得到显示页数的数组 $scope.page = getRange($scope.option.number, $scope.option.totalPages, 5); // $scope.isFirst = isFirst; // $scope.isLast = isLast; }) // function isFirst() { return $scope.option.number === 0; } // function isLast() { return $scope.option.totalPages === 0 || $scope.option.number == $scope.option.totalPages - 1; } // $scope.pre = function() { $scope.pageClick('上一页'); } $scope.next = function() { $scope.pageClick('下一页'); } //绑定点击事件 $scope.pageClick = function(page) { if (page == '上一页') { if (isFirst()) { return; } page = parseInt($scope.option.number) - 1; } else if (page == '下一页') { if (isLast()) { return; } page = parseInt($scope.option.number) + 1; } else { page -= 1; } if (page < 1) { page = 0; } else if (page > $scope.option.totalPages) { page = $scope.option.totalPages - 1; } //点击相同的页数 不执行点击事件 if (page == $scope.option.number) { return; } // $scope.option.number = page; $scope.pageable.page = page; // $scope.query() // $scope.page = getRange($scope.option.number, $scope.option.totalPages, 5); } //返回页数范围(用来遍历) function getRange(curr, all, count) { //计算显示的页数 curr = parseInt(curr) + 1; all = parseInt(all); count = parseInt(count); var from = curr - parseInt(count / 2); var to = curr + parseInt(count / 2) + (count % 2) - 1; //显示的页数容处理 if (from <= 0) { from = 1; to = from + count - 1; if (to > all) { to = all; } } if (to > all) { to = all; from = to - count + 1; if (from <= 0) { from = 1; } } var range = []; for (var i = from; i <= to; i++) { range.push(i); } return range; } } } })
分页指令
最新推荐文章于 2021-04-28 18:04:36 发布