angular-pagecontrol
v1.0.9
Published
this plugin is a pagecontrol for angularJS。
Downloads
6
Maintainers
Readme
angular-pagecontrol
this plugin is a pagecontrol for angularJS。
get start
git
git clone [email protected]:PsChina/angularJS-pageControl.git
npm
npm install angular-pagecontrol
usage
<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"
>
<!--
max-page @ 你的最大页数
box-class @ 你的分页器样式
item-class @ 分页器按钮样式
active-class @ 按钮选中样式
data = 你要请求的每页数据的容器
show-number-button @ 你想要显示多少个按钮
url @ 获取每页数据的url
params @ 请求每页数据的具体参数 页面写第一页即可
current-page-key @ 告诉组建如何求改你的cureentPage的value 的key 是哪个 比如要请求第n也的数据的key 是{currentPage:n} 可以设置为 current-page-key = "currentPage"
current-page = 双向绑定当前页
method默认参数为POST @ 可以不传递参数
previousPageClass @ 上一页类名
nextPageClass @ 下一页类名
previousOmitClass @ 上一页省略号类名
nextOmitClass @ 下一页省略号类名
-->
<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' //获取每页数据的url
$scope.params = { //请求参数
userId:001,
showPage:2,//设置每页显示多少个数据
currentPage:$scope.currentPage
}
$http({
url:'http://localhost:8030/maxPage', //获取页数的url
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>