angularjs前端分页自定义指令pagination

最新推荐文章于 2021-04-22 22:43:41 发布

转载最新推荐文章于 2021-04-22 22:43:41 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shunzdd/p/5585997.html

文章标签：

#前端 #ViewUI

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

转载于:https://www.cnblogs.com/shunzdd/p/5585997.html