<page-ctrl
max-page="{{maxPage}}"
box-class="pageControl"
item-class="item"
active-class="active"
data="data"
show-number-button="6"
url="{{url}}"
method="POST"
params="{{params}}"
current-page-key="currentPage"
current-page='currentPage'
previous-page-class="previousPage"
next-page-class="nextPage"
previous-omit-class="previousOmit"
next-omit-class="nextOmit"
>
<style>
html,body {
margin: 0;
padding: 0;
height: 100%;
}
.item{
margin: 2px;
border:1px solid black;
width: 50px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
}
.pageControl{
position: fixed;
left: 0;
bottom: 0;
}
.pageContent{
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.active{
background: red;
}
.previousPage{
margin: 2px;
border:1px solid black;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: green;
float: left;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.nextPage{
margin: 2px;
border:1px solid black;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: green;
float: left;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.previousOmit{
float: left;
width: 50px;
height: 50px;
line-height: 80px;
text-align: center
}
.nextOmit{
float: left;
width: 50px;
height: 50px;
line-height: 80px;
text-align: center
}
</style>
<script>
controller('main',function($scope,$http){
$scope.currentPage=1;
$scope.url = 'http://localhost:8030/history'
$scope.params = {
userId:001,
showPage:2,
currentPage:$scope.currentPage
}
$http({
url:'http://localhost:8030/maxPage',
method:'POST',
data:{
userId:001,
showPage:2
}
}).then(function(result){
$scope.maxPage = result.data.maxPage;
},function(error){
console.log(error.message);
$scope.maxPage = 10;
})
})
</script>