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