angularjs前端分页自定义指令pagination

Posted 2020-07-25 顺子2016

在table的后面：
<div class="panel-footer">
<nav class="pull-right">
<pagination num-pages="pages" curr-page="page" on-select-page="selectPage(page)"></pagination>
</nav>
</div>

js里面
.directive(‘pagination‘, function(){
return {
restrict: ‘E‘,
scope: {
numPages: ‘=‘,
currPage: ‘=‘,
onSelectPage: ‘&‘
},

template: ‘<ul class="pagination">‘
+‘<li ng-class="{disabled: noPreviousPage()}">‘
+‘<a ng-click="selectPage(1)">首页</a>‘
+‘</li>‘

+‘<li ng-class="{disabled: noPreviousPage()}">‘
+‘<a ng-click="selectPreviousPage()">上一页</a>‘
+‘</li>‘

+‘<li ng-repeat="page in pages" ng-class="{active: isActivePage(page)}">‘
+‘<a ng-click="selectPage(page)">{{page}}</a>‘
+‘</li>‘

+‘<li ng-class="{disabled: noNextPage()}">‘
+‘<a ng-click="selectNextPage()">下一页</a>‘
+‘</li>‘

+‘<li ng-class="{disabled: noNextPage()}">‘
+‘<a ng-click="selectPage(pages.length)">尾页</a>‘
+‘</li>‘

+‘</ul>‘,

replace: true,
link: function(s){
s.$watch(‘numPages‘, function(value){
s.pages = [];

for(var i=1;i<=value;i++){
s.pages.push(i);
}

if(s.currPage > value){
s.selectPage(value);
}
});

//判读是否有上一页
s.noPreviousPage = function(){
return s.currPage === 1;
};

//判断是否有下一页
s.noNextPage = function(){
return s.currPage === s.numPages;
};

//判断当前页是否被选中
s.isActivePage = function(page){
return s.currPage===page;
};

//选择页数
s.selectPage = function(page){
if(!s.isActivePage(page)){
s.currPage = page;

s.onSelectPage({ page:page });
}
};

//选择下一页
s.selectNextPage = function(){
if(!s.noNextPage()){
s.selectPage(s.currPage+1);
}
};

//选择上一页
s.selectPreviousPage = function(){
if(!s.noPreviousPage()){
s.selectPage(s.currPage-1);
}
};
}
};
});