angularjs中的分页指令

自定义指令

import angular from ‘angular‘;

/**
 * @ngdoc module
 * @name components.page
 * @description 分页directive
 */
export default angular.module(‘pageDirective‘, []).directive(‘ngPage‘, function () {
    return {
        restrict: ‘E‘,
        scope: {
            totalCount: ‘=‘,
            pageSize: ‘=‘,
            param: ‘=‘,
            pageItmes: ‘=‘,
            currentPage: ‘=‘,
            goPage: ‘&‘,
            showMaxPage: ‘@‘,
            GO: ‘@‘
        },
        controller: controller,
        template: templateFunction
    }

    function controller($scope, $element, $attrs) {
        var size = 0;
        $scope.$watch(‘pageSize‘, function (nvalue, ovalue) {
            size = parseInt(nvalue);
            if (typeof(ovalue) !== ‘undefined‘) {
                $scope.currentPage = parseInt(($scope.currentPage - 1) * Number(ovalue) / size) + 1;
            }
            $scope.totalPage = getTotalPages();
        });

        //计算总页数
        var getTotalPages = function () {
            return Math.ceil($scope.totalCount / size);
        };

        //监控总记录条数是否发生变化，如改变，需要重新计算页数
        $scope.$watch(‘totalCount‘, function () {
            $scope.totalPage = getTotalPages();
            if ($scope.totalPage == undefined || isNaN($scope.totalPage)) {
                $scope.totalPage = 1
            }
        });

        //监控总页数，调整展示页码
        $scope.$watch(‘totalPage‘, function () {
            $scope.pages = getPages($scope.totalPage, $scope.currentPage);
        });

        //监控跳转的页数只能为数字
        $scope.$watch(‘GO‘, function () {
            var re = /[^\d]/g;
            if ($scope.GO !== ‘‘ && !re.test($scope.GO) && $scope.GO > 0) {
                $scope.pages = getPages($scope.totalPage, $scope.currentPage);
            } else {
                $scope.GO = ‘‘;
            }
        });

        //监控当前页，然后调整展示页码
        $scope.$watch(‘currentPage‘, function () {
            // debugger;
            $scope.pages = getPages($scope.totalPage, $scope.currentPage);
        });

        //跳转到某一页
        $scope.setCurrentPage = function (pageno) {
            if (pageno === ‘...‘ || pageno === 0 || pageno > $scope.totalPage || pageno === ‘‘) {
                return;
            }
            $scope.currentPage = pageno;
            $scope.param.page.currentPage = pageno;
            $scope.goPage($scope.param);
            $scope.GO = ‘‘;
        };

        //每页显示size改变
        $scope.changeSize = function () {
            $scope.param.page = {
                currentPage: 1,
                pageSize: $scope.pageSize
            };
            $scope.goPage($scope.param);
        };

        var getPages = function (totalPage, currentPage) {
            var pages = [];
            currentPage = parseInt(currentPage);
            totalPage = parseInt(totalPage);
            if (totalPage === 0) {
                pages.push(1);
            }
            //总页数<最大展示页数：展示全部
            else if (totalPage <= $attrs.showMaxPage) {
                for (var i = 1; i <= totalPage; i++) {
                    pages.push(i);
                }
            }
            //当前页靠近首页前4页，显示：首页前4页，..., 尾页后2页
            else if (totalPage > $attrs.showMaxPage && currentPage <= 4) {
                pages.push(1);
                pages.push(2);
                pages.push(3);
                pages.push(4);
                pages.push("...");
                pages.push(totalPage - 1);
                pages.push(totalPage);
            }
            // 当前页靠近尾页后4页，显示
            else if (totalPage > $attrs.showMaxPage && (totalPage - currentPage) < 4) {
                pages.push(1);
                pages.push(2);
                pages.push("...");
                pages.push(totalPage - 3);
                pages.push(totalPage - 2);
                pages.push(totalPage - 1);
                pages.push(totalPage);
            }
            //当前页既不靠近首页前4页也不靠近尾页后4页，
            else {
                pages.push(1);
                pages.push(2);
                pages.push("...");
                pages.push(currentPage - 1);
                pages.push(currentPage);
                pages.push(currentPage + 1);
                pages.push("...");
                pages.push(totalPage);
            }
            return pages;
        };
    }

    function templateFunction() {
        return ‘<nav>‘ +
            ‘<ul class="pagination pagination-sm" style="font-size:15px;">‘ +
            ‘<li><a ng-click="setCurrentPage(currentPage-1)" style="font-size:13px;">&laquo;</a></li>‘ +
            ‘<li ng-class="{active: pageno == currentPage}" ng-repeat="pageno in pages" style="font-size:13px;">‘ +
            ‘<a ng-click="setCurrentPage(pageno)">{{pageno}}</a></li>‘ +
            ‘<li><a ng-click="setCurrentPage(currentPage-0+1)" style="font-size:13px;">&raquo;</a></li>‘ +
            ‘<li><span>每页‘ +
            ‘<select ng-model="pageSize" ng-change="changeSize()" style="width: 55px;" ng-options="item for item  in pageItmes">‘ +
            ‘</select></span>‘ +
            ‘</li>‘ +
            ‘<li><span><input type="text" style="width: 30px;" ng-model="GO"/></span></li>‘ +
            ‘<li><a ng-disabled="false" class="ng-binding" ng-click="setCurrentPage(GO)">GO</a></li>‘ +
            ‘</ul>‘ +
            ‘</nav>‘
            ;
    }
}).name;

页面中调用

<page-directive total-count="param.page.totalCount" page-size="param.page.pageSize" param="param"
           page-itmes="param.selectCount" show-max-page="9" current-page="param.page.currentPage"
           go-page="queryList(param.page.currentPage)"></page-directive>

页面中获取数据的方法是queryList，go-page的时候把currentpage作为传递过去即可发送请求，取得想要的结果。

controller中需要传入初始化的数据

//初始化分页信息
$scope.param = {
   selectCount: [5, 10, 15],
      page: {
         currentPage: 1,
          pageSize: 5
      }
};