bootstrap3.0 实现分页、跳转、翻页功能

背景：bootstrap3.0 +angularjs实现分页栏效果

效果图

html：

       <nav aria-label="Page navigation" style="display: inline-flex;align-items: center;align-content: center;">
                <div class="margin20">
                    <span class="pagePadding">{{'common.total'|translate}}：{{totalCount}} {{'common.item'|translate}}</span>
                </div>
                <div class="margin20">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            {{selectedPageItem}} &nbsp;&nbsp; {{'common.pageItem'|translate}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" ng-repeat="pageSize in pageItems">
                            <li ng-repeat="pageSize in pageItems" ng-click="changePageSize(pageSize)"><a>{{pageSize}} &nbsp;&nbsp; {{'common.pageItem'|translate}}</a></li>
                        </ul>
                    </div>
                </div>
                <ul class="pagination">
                    <li ng-class="(currentPage - 1 <= 0 ? 'disabled' : '')" ng-click="prevPage()">
                        <a aria-label="{{'common.prev'|translate}}">
                            <span aria-hidden="true">{{'common.prev'|translate}}</span>
                        </a>
                    </li>
                    <li ng-repeat="page in pages" ng-click="goPage(page)" ng-class="(currentPage == page ? ' active': ' ')">
                        <span>{{page}}</span>
                    </li>
                    <li ng-show="currentPage <= totalPage - 4"><span>...</span></li>
                    <li ng-class="(currentPage == totalPage ? ' active': ' ')" ng-click="goPage(totalPage)" ng-show="totalPage >= 7"><span>{{totalPage}}</span></li>
                    <li ng-class="(currentPage + 1 > totalPage ? 'disabled' : '')" ng-click="nextPage()">
                        <a aria-label="{{'common.next'|translate}}">
                            <span aria-hidden="true">{{'common.next'|translate}}</span>
                        </a>
                    </li>
                </ul>
                <div class="margin20">
                    <span class="pagePadding">{{'common.go'|translate}}：</span>
                    <input type="text" ng-model="toPage" ng-blur="goPage(toPage)" class="form-control" style="width: 100px;display: inline" />
                    <span class="pagePadding">{{'common.page'|translate}}</span>
                </div>
            </nav>

搜索方法search，删除了一些代码自行填上

    $scope.search = function () {


        let $postData = {
   
        };
        httpService.post({
            url:  '',
            data: $postData
        }, function successCallBack(response) {
            $scope.totalPage = 
            $scope.totalCount = 
            if ($scope.currentPage === 1) {
                $scope.pages = [];
                if ($scope.totalPage > 0 && $scope.totalPage <= 6) {
                    for (let i = 1; i <= $scope.totalPage; i++) {
                        $scope.pages.push(i);
                    }
                } else {
                    for (let i = 1; i <= 5; i++) {
                        $scope.pages.push(i);
                    }
                }
            }
        }, function failCallBack(errorCode) {
            $scope.responseErrorCode = errorCode;
        });
    }

init

    $scope.currentPage = 1;
    $scope.pageSize = 25;
    $scope.totalPage = 0;
    $scope.pageItems = [25, 50, 100, 200];
    $scope.selectedPageItem = 25;

核心分页方法：

    $scope.changePageSize = function (pageSize) {
        $scope.pageSize = pageSize;
        $scope.selectedPageItem = pageSize;
        $scope.search();
    }

    $scope.prevPage = function () {
        if ($scope.currentPage - 1 <= 0) {
            return;
        }
        --$scope.currentPage;
        if ($scope.totalPage > 6) {
            $scope.pages = $scope.getPagesWhenChangePage();
        }
        $scope.search();
    }
    $scope.getPagesWhenChangePage = function () {
        let newPages = [];
        if ($scope.currentPage + 2 <= $scope.totalPage - 1) {
            if ($scope.currentPage > 3) {
                let i = -2, end = 2;
                if ($scope.currentPage + 2 >= $scope.totalPage - 1) {
                    end = ($scope.totalPage - 1 - $scope.currentPage);
                    i = i - (2 - end);
                }
                for (; i <= end; i++) {
                    newPages.push($scope.currentPage + i);
                }
            } else {
                for (let i = 1; i <= 5; i++) {
                    newPages.push(i);
                }
            }
        } else if ($scope.currentPage + 2 > $scope.totalPage - 1) {
            let le = $scope.totalPage - 4;
            for (let i = le - 1; i <= $scope.totalPage - 1; i++) {
                newPages.push(i);
            }
        }
        return newPages;
    }

    $scope.goPage = function (page) {
        if (page > $scope.totalPage || page <= 0 || page == undefined || page == '') {
            page = 1;
        }
        $scope.currentPage = Number(page);
        if ($scope.totalPage > 6) {
            $scope.pages = $scope.getPagesWhenChangePage();
        }
        $scope.toPage = '';
        $scope.search();
    }

    $scope.nextPage = function () {
        if ($scope.currentPage + 1 > $scope.totalPage) {
            return;
        }
        ++$scope.currentPage;
        if ($scope.totalPage > 6) {
            $scope.pages = $scope.getPagesWhenChangePage();
        }
        $scope.search();
    }

css

.margin20 {
    margin: 20px;
}

.pagePadding {
    padding:7px 12px;
}