框架：

angularjs +angula-material

背景：

angularjs material提供的分頁樣式不滿足專案的需求，需要自定義分頁的樣式。

如圖所示：

增加了首頁/末頁，上一頁/下一頁，更多頁面…

html:

     <paging  class="table-page" layout="row" layout-align="end center" 
     	limit="limit" limit-option="[10]" total-count="{{parameterList.length}}" 
     	current-page="page" on-paginate="dessert(page,limit)"> </paging>
 

limit:每一頁顯示的記錄數目； limit-option：每一頁顯示數目可選項，如5,10,20等等； total-count：所有記錄條數的總計； current-page：當前頁面頁數； on-paginate：當前頁面頁數變化時，所執行的函式；

js指令：

app.directive("paging", function($compile,$log) {
        return {
            restrict: 'AEC',
            template: '<div></div>',
            replace: true,
            scope:{
                limitOption:'=', //per page count
                totalCount:'@', //the list total count
                currentPage:'@',
                onPaginate:'&'
            },
            link: function (scope, elm, attrs){
                scope.limit = scope.limitOption[0];
                scope.pageCount = 0;
                scope.pageList=[];
                //<select ng-change="limitChange()" ng-model="limit" ng-options="x as x for x in limitOption"></select>
                var appendContent = $compile(
                    '<div class="perPageNumber"></div> '+'    <div class="item_box" layout="row">\n' +
                    '                    <div class="home_page_btn item" ng-click="beHomePage()"><<</div>\n' +
                    '                    <div class="prev_page_btn item" ng-click="bePrePage()"><</div>\n' +
                    '                    <div class="page_detail" layout-fill><div id="scroll_page_box" layout="row">' +
                    '                        <div class="page_item item" ng-click="choosePage(item)" ng-repeat="item in pageList" ng-class="item.className">{{item.page}}</div></div>' +
                    '                    </div>\n' +
                    '                    <div class="more_page_btn item" ng-if="pageList.length >=7">...</div>\n' +
                    '                    <div class="next_page_btn item" ng-click="beNextPage()">></div>\n' +
                    '                    <div class="last_page_btn item" ng-click="beLastPage()">>></div>\n' +
                    '                </div>'
                )(scope);
                elm.append(appendContent);

                scope.$watch('pageList',function (newVal,oldVal) {
                    if(scope.pageList.length >0){
                        scope.pageList[0].className = 'checked';
                    }
                    attrs.$set('currentPage',1);
                })
                
                attrs.$observe('totalCount', function (value) {
                    scope.pageList=[];
                    var pageCount = Number(value) / scope.limit;
                    for(var index =0;index < pageCount;index++){
                        scope.pageList.push({
                            page:index+1,
                            className:'unchecked'
                        });
                    }
                });
                
                attrs.$observe('currentPage', function (value) {
                    for(var index in scope.pageList){
                        scope.pageList[index].className ='unchecked';
                        if(Number(value) == scope.pageList[index].page){
                            scope.pageList[index].className ='checked';
                        }
                    }
                });

                scope.choosePage =function (item){
                    attrs.$set('currentPage',item.page);
                    scope.currentPage = item.page;
                    scope.onPaginate({page:item.page,limit:scope.limit});
                }
                
                scope.limitChange =function () { //重新計算pagecount
                    attrs.$set('limit',scope.limit);
                    attrs.$set('currentPage',1);
                    scope.onPaginate({page:attrs.currentPage,limit:scope.limit});
                    document.getElementById('scroll_page_box').style.left = 0 +'px';
                }
                
                scope.beHomePage =function () {
                    attrs.$set('currentPage',1);
                    scope.onPaginate({page:attrs.currentPage,limit:scope.limit});
                    document.getElementById('scroll_page_box').style.left = 0 +'px';
                };
                
                scope.beLastPage =function () {
                    attrs.$set('currentPage',scope.pageList.length);
                    if(scope.pageList.length >6){
                        document.getElementById('scroll_page_box').style.left = (-(attrs.currentPage)*38+228)+'px';
                    }
                    scope.onPaginate({page:attrs.currentPage,limit:scope.limit});
                };
                
                scope.beNextPage =function () {
                    if(attrs.currentPage >= scope.pageList.length){
                        return;
                    }
                    attrs.$set('currentPage',attrs.currentPage+1);
                    if(attrs.currentPage >5 && attrs.currentPage < scope.pageList.length){
                        document.getElementById('scroll_page_box').style.left = -(attrs.currentPage -5)*38 +'px';
                    }
                    scope.onPaginate({page:attrs.currentPage,limit:scope.limit});
                };
                
                scope.bePrePage =function () {
                    if(attrs.currentPage <=1){
                        return;
                    }
                    attrs.$set('currentPage',attrs.currentPage-1);
                    if(attrs.currentPage > 4){
                        document.getElementById('scroll_page_box').style.left = (-(attrs.currentPage)*38+190)+'px';
                    }
                    scope.onPaginate({page:attrs.currentPage,limit:scope.limit});
                };
            },
        }
    });
 

在相應的controller裡：

$scope.dessert =function (page,limit) {  //獲得當前頁面以及頁面顯示條數
	 //這邊寫需要執行的函式
}

css樣式：

/********************************************** 分頁樣式*****************************************/
.table-page{color:#fff;font-size: 12px;margin:40px 0 20px 0;}
.perPageNumber{margin-right: 10px;}
.perPageNumber select{min-width: 46px;height: 32px;line-height: 32px;padding:0 4px;border:1px solid #134880;border-radius: 3px;color:#86ade4;background-color: #1c5c9f;}

.table-page .item_box{border:1px solid #134880;background-color: #0e4076;}
.table-page .item{min-width: 38px;padding:0 12px;height: 30px;line-height: 30px;color:#86ade4;background-color: #0e4076;border-right:1px solid #134880;cursor: pointer;outline: none;text-align: center;max-width: 38px;}
.table-page .item.checked{
    background-color: #1c5c9f;
    color:#fff;
}
.table-page .home_page_btn,.table-page .last_page_btn,.table-page .prev_page_btn,.table-page .next_page_btn{
    background-color: #0e4076;
    color:#fff;
}
.table-page .item.unchecked{
    color:#86ade4;background-color: #0e4076;
}

.table-page .page_detail {
    max-width: 228px;
    overflow: hidden;
}
#scroll_page_box{position: relative;left: 0;}