框架:
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;}