分頁

自定義分頁插件

html

<div class="row">
    <div class="col-xs-12 text-center">
        <page page-conf="pageConf"></page>
    </div>
</div>

js

$scope.pageConf = PageUtils.initPageConf();
//頁面切換回調函數
$scope.pageConf.change = function (num) {
    $('body,html').animate({scrollTop:0},100);//點擊下一頁或者頁碼等查詢列表回到最上面
    this.validatePageNo(num);
    $scope.query();//加載數據（加載完一定要記得updatePageConf）
};

PageUtils.js(公司後臺開發人員書寫的) 

var PageUtils = {
    initPageNavData:function () {
        return {
            pageNo:1,
            nums:['1','2','3','4','5'],
            totalPages:5,
            isFirst:true,
            isLast:true
        }
    },
    getPageNavDataFromPageContent:function (pageData) {
        var pageNav = {};
        pageNav.isFirst = pageData.first;
        pageNav.isLast = pageData.last;
        pageNav.pageNo = pageData.number+1;
        pageNav.totalPages = pageData.totalPages;
        var endPageNavNum = 5;
        if(pageData.totalPages <= 5){
            endPageNavNum =  pageData.totalPages;
        }else{
            if(  pageNav.pageNo >=3 ){
                if( pageNav.pageNo >= (pageData.totalPages-2)){
                    endPageNavNum = pageData.totalPages;
                }else{
                    endPageNavNum =   pageNav.pageNo+2;
                }
            }
        }
        var nums = [];
        for(var i=1;i<=endPageNavNum;i++){
            nums.push(i);
        }
        pageNav.nums = nums;
        return pageNav;
    },
    initPageConf:function () {
        return {
            currentNo:1,
            nums:['1','2','3','4','5'],
            totalPages:5,
            isFirst:true,
            isLast:true,
            validatePageNo:function (num) {
                if(num < 1){
                    num = 1;
                }
                if(this.totalPages > 0 && num >  this.totalPages){
                    num = this.totalPages;
                }
                this.currentNo = num;
            },
            updatePageConf : function (pageData) {
                this.isFirst = pageData.first;
                this.isLast = pageData.last;
                this.currentNo = pageData.number+1;
                this.totalPages = pageData.totalPages;
                var endPageNavNum = 5;
                if(pageData.totalPages <= 5){
                    endPageNavNum =  pageData.totalPages;
                }else{
                    if( this.currentNo >=3 ){
                        if( this.currentNo >= (pageData.totalPages-2)){
                            endPageNavNum = pageData.totalPages;
                        }else{
                            endPageNavNum =   this.currentNo+2;
                        }
                    }
                }
                var nums = [];
                var startPageNavNum = 1;
                if(endPageNavNum > 5){
                    startPageNavNum = endPageNavNum-4;
                }
                for(var i=startPageNavNum;i<=endPageNavNum;i++){
                    nums.push(i);
                }
                this.nums = nums;
            }
        }
    }
}

效果

注：此爲個人筆記及總結，有誤或有更好的解決方案請指正！謝謝