工作问题总结——手动实现分页（2017-07-29）
一、从后台获取所有数据进行分页
前几天在做后台管理系统的时候涉及到很多的数据分页显示，因为后台给的数据里面没有分页请求，而是一次性请求数据，所以需要自己实现分页。
实现分页首先需要实现的是页码的展示，因此写了一个展示页码的函数，需要传入的参数有总页数和当前选择的页数。函数如下：
paging(total, current) {
// 小于十页全显示
if (total <= 10) {
let arr = [];
for (var i = 0; i < total; i++) {
arr[i] = i + 1;
}
return arr.map(x => ({
type: 0,
value: x,
isCurrent: x === current
}))
}
// 大于十页部分显示
else {
// 当前页号小于等于5
if (current <= 4) {
return [1, 2, 3, 4, 5].map<{ type, value?, isCurrent? }>(x => ({
type: 0,
value: x,
isCurrent: x === current
}))
.concat([
{type: 1},
{type: 0, value: total, isCurrent: false}
])
}
// 当前页号是最后5页之一
else if (current > total - 4) {
return [
{type: 0, value: 1, isCurrent: false},
{type: 1}
]
.concat([total - 4, total - 3, total - 2, total - 1, total].map(x => ({
type: 0,
value: x,
isCurrent: x === current
})))
}
// 其它情况
else {
return [
{type: 0, value: 1, isCurrent: false},
{type: 1}
]
.concat([current - 2, current - 1, current, current + 1, current + 2].map(x => ({
type: 0,
value: x,
isCurrent: x === current
})))
.concat([
{type: 1},
{type: 0, value: total, isCurrent: false}
])
}
}
}
该函数返回的是一个数组，即页码，type为0的表示数字，type为1表示…
页码的分页实现了，接下来就需要对返回的数据进行分页的显示了，根据每页显示的条数来对整个数据进行截取，完整的代码如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<style>
.box {
flex: 1;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
margin: 0 30px;
background: #fff;
border-radius: 5px;
}
.list {
margin: 0 20px;
display: flex;
flex: 1;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
table {
border-collapse: collapse;
flex: 1;
}
tr, td, th {
text-align: center;
padding: 0 5px;
border: 1px solid #d3d8dc;
/*border-collapse: collapse;*/
vertical-align: middle;
flex: 1;
}
th {
height: 35px;
font-weight: normal;
background: #F5F6FA;
}
td {
height: 35px;
font-size: 12px }
tr:nth-child(odd) {
background: #F5F6FA }
tr:nth-child(even) {
background: #ffffff }
.paging {
height: 26px;
line-height: 26px;
display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
display: -webkit-flex; /* Chrome */
display: -moz-box; /* Firefox 19 */
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
margin-bottom: 30px;
}
i {
font-style: normal;
color: red;
}
.page-common {
font-size: 12px;
display: block;
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
border: 1px solid #aaaaaa;
margin-right: 5px;
color: #393f51;
cursor: pointer;
}
.before {
margin-left: 10px;
}
.after {
margin-right: 20px;
}
.bg {
background-color: rgba(128, 128, 128, .3);
border: none;
}
ul {
padding-left: 0;
}
li {
float: left;
}
.page-common:hover {
background: #ccc;
}
.pageNum {
list-style: none }
.skip {
width: 30px;
height: 26px;
line-height: 26px;
border: 1px solid #aaaaaa;
margin-right: 5px;
color: #393f51 }
.skipButton {
width: 35px;
height: 26px;
text-align: center;
cursor: pointer;
background: #0099CC;
}
</style>
<script src="node_modules/angular/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="testController">
<div class="box">
<div class="list">
<table class="table">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr ng-repeat="item in vm.items">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
</tr>
</table>
</div>
<div class="paging">
<span>第<i ng-bind="vm.selPage"></i>页/共<i ng-bind="vm.total"></i>页，共<i ng-bind="totalCount"></i>条</span>
<span class="before page-common" ng-click="vm.prevPage(vm.selPage)" ng-class="{1:'bg'}[vm.selPage]">＜</span>
<ul>
<li class="pageNum page-common" ng-click="vm.selectPage(item.value,item.type)" ng-repeat="item in vm.pager"
ng-class="{true:'current',false:'normal'}[item.isCurrent]">{{item.type==0?item.value:'...'}}
</li>
</ul>
<span class="after page-common" ng-click="vm.nextPage(vm.selPage)"
ng-class="{'bg':vm.selPage==vm.total}">＞</span>
<input type="text" class="skip" ng-model="vm.count">
<span class="skipButton" ng-click="vm.jump(vm.count)">跳转</span>
</div>
</div>
<script>
angular.module('myApp',[])
.controller('testController', function ($scope, $timeout) {
$scope.data=data;
$scope.actions=actions;
data.data = [ //模拟后台获取的数据
{
id: 1,
name: "张三",
age: "23",
sex: "女"
},
{
id: 2,
name: "李四",
age: "23",
sex: "女"
},
{
id: 3,
name: "dfhod",
age: "22",
sex: "女"
},
{
id: 4,
name: "dfd",
age: "34",
sex: "男"
},
];//所有的数据
data.pager=[];
// data.total;总页数
// data.totalCount;//总条数
data.pageSize=2;// 每页显示条数
// data.count;//跳转到某页
// data.items;//每页显示的数据
data.selPage=1;//当前所在的页数
data.totalCount=data.length;
data.total=Math.ceil(data.totalCount/data.pageSize);
data.items=data.data.slice(0,data.pageSize)
pager=actions.paging(data.total,data.selPage);
actions.paging=function(total, current) {
// 小于十页全显示
if (total <= 10) {
let arr = [];
for (var i = 0; i < total; i++) {
arr[i] = i + 1;
}
return arr.map(x => ({
type: 0,
value: x,
isCurrent: x === current
}))
}
// 大于十页部分显示
else {
// 当前页号小于等于5
if (current <= 4) {
return [1, 2, 3, 4, 5].map<{ type, value?, isCurrent? }>(x => ({
type: 0,
value: x,
isCurrent: x === current
}))
.concat([
{type: 1},
{type: 0, value: total, isCurrent: false}
])
}
// 当前页号是最后5页之一
else if (current > total - 4) {
return [
{type: 0, value: 1, isCurrent: false},
{type: 1}
]
.concat([total - 4, total - 3, total - 2, total - 1, total].map(x => ({
type: 0,
value: x,
isCurrent: x === current
})))
}
// 其它情况
else {
return [
{type: 0, value: 1, isCurrent: false},
{type: 1}
]
.concat([current - 2, current - 1, current, current + 1, current + 2].map(x => ({
type: 0,
value: x,
isCurrent: x === current
})))
.concat([
{type: 1},
{type: 0, value: total, isCurrent: false}
])
}
}
}
actions.setData=function(data) {
console.log(this.selPage + "xuanze d")
this.items = data.slice((this.pageSize) * (this.selPage - 1), this.selPage * (this.pageSize))
console.log(this.items)
}
actions.selectPage=function(page,type) {
if (page < 1 || page > this.total) return;
if(type==1) return;
console.log("shifou ")
// if(page>2){
// this.setData(this.rooms);
// }
this.selPage = page
this.setData(this.users);
console.log(this.selPage)
console.log(typeof this.selPage)
this.pager = this.paging(this.total, this.selPage)
console.log(this.pager);
}
//页码的显示
// 上一页
actions.prevPage=function(page) {
this.selectPage(page - 1);
console.log(page)
}
//下一页
actions.nextPage=function(page) {
this.selectPage(page + 1)
}
//页面跳转
actions.jump=function(page) {
console.log(page)
if (page) {
var page1 = parseInt(page)
this.selectPage(page1)
}
}
})
//模拟后台获取的数据
</script>
</body>
</html>
2328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
