2017年4月份，我去无锡某软件公司面试，项目经理当时问到一个问题：怎么实现分页效果，说明实现的原理？当时觉得分页是个极其复杂的技术难点，也没回答的很完整。现总结原生js实现分页效果与此，并附上详细注释：
总结：分页必须要搞清楚几个参数：
1、一共几条数据
2、每页显示几条数据（x）
3、一共几页
难点：点击第n页时，显示哪几条数据(n-1)x+1～nx条数据（n>=1）
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js分页效果</title>
<style>
* {
margin:0;
padding:0;
}
img {
border:0;
}
ol,ul,li {
list-style:none;
}
.box {
width:100%;
height:500px;
position:relative;
}
#conten {
width:400px;
height:410px;
margin:20px auto;
border:1px solid #ccc;
overflow:hidden;
}
#conten li {
width:100%;
height:40px;
border-bottom:1px solid #ff0000;
}
#btn {
width:180px;
height:30px;
margin:20px auto;
border:1px solid #ccc;
padding:5px 10px;
position:relative;
overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
<ul id="conten">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
</ul>
<ul id="btn">
</ul>
</div>
<script>
//总结：分页必须要搞清楚几个参数：1、一共几条数据 2、每页显示几条数据（x） 3、一共几页
// 难点：点击第n页时，显示哪几条数据(n-1)*x+1～n*x条数据（n>=1）
window.onload = function() {
var oConten = document.getElementById("conten");
var oLi = oConten.getElementsByTagName("li");
var bBtn = document.getElementById("btn");
var n = 0;//页面数量（重点）
// 页面内容控制
if (oLi.length % 10 == 0) {//计算页数
n = oLi.length / 10 | 0;//Math.floor()
} else {
n = (oLi.length / 10 | 0) + 1;//Math.ceil()
}
//添加页码标签（几个页面就添加几个页码）
for (var i = 1; i <= n; i++) {
cLi = document.createElement("li");
cLi.style.cssText = "width:30px; height:30px; background:#ff0000;margin:0 5px;display: inline-block;position:absolute; transition:left 0.5s";
cLi.innerHTML = i;
bBtn.appendChild(cLi);
}
var aLi = bBtn.getElementsByTagName("li");
for (var i = 0; i <= n - 1; i++) {
aLi[i].index = i;
aLi[0].style.background = "#ccc";
aLi[i].style.left = i * 40 + "px";
// alert(aLi[i].index)
//点击页码做3件事
aLi[i].onclick = function() {
b = this.index;
// alert(b)
// 1.当前页码active（简单功能）
for (var j = 0; j < aLi.length; j++) {
aLi[j].style.background = "#ff0000";
}
this.style.background = "#ccc";
//2.页码滚动（该功能可有可无）
if (b <= 2) {
for (var j = 0; j < aLi.length; j++) {
aLi[j].style.left = j * 40 + "px";
}
}
if (b > 2 && b < (n - 2)) {
for (var j = 0; j < aLi.length; j++) {
aLi[j].style.left = (j - b + 2) * 40 + "px";
}
}
//3.页面切换
for (var j = 0; j < oLi.length; j++) {//点击第b页，先让 所有页面隐藏
oLi[j].style.display = "none";
}
for (var j = (b * 10); j < (b + 1) * 10; j++) {//再显示第 b * 10条 至 (b + 1) * 10-1条数据(b>=0)（重难点）
oLi[j].style.display = "block";
}
}
}
}
</script>
</body>
</html>
另附php分页，仅供对比参考
<?php
/**
*接收客户端提交uid，查询出该用户有哪些订单，形如：
{
totalCount: 23, //满足条件的记录总数
pageSize: 5, //页面大小，一页最多显示的记录数
pageCount: 5, //页面总数量
pageNum: 3, //当前显示的是哪页中的数据
data: [{},{},{},{},{}] //当前页中的数据
}
*/
header('Content-Type: application/json');
@$uid = $_REQUEST['uid'] or die('{"code":401,"msg":"uid required"}');
@$pageNum = $_REQUEST['pageNum'];
if(! $pageNum ){ //客户端未提交要显示的页号
$pageNum = 1;
}else { //客户端提交了要显示的页号
$pageNum = intval($pageNum); //把字符串解析为整数
}
//即将要输出给客户端的分页对象
$output = [
'totalCount' => 0,
'pageSize' => 5,
'pageCount' => 0,
'pageNum' => $pageNum,
'data' => null
];
require('1_init.php');
//1 查询出满足条件的总记录数
$sql = "SELECT COUNT(*) FROM jd_order WHERE userId=$uid";
$result = mysqli_query($conn,$sql);
$output['totalCount'] = intval( mysqli_fetch_row($result)[0] );
//2 计算总页数
$output['pageCount'] = ceil( ($output['totalCount'])/($output['pageSize']) );
//3 根据用户编号查询其所有的订单信息
$start = ($output['pageNum']-1)*$output['pageSize']; //从哪一条记录开始读取
$count = $output['pageSize']; //一次最多读取的条数
$sql = "SELECT * FROM jd_order WHERE userId=$uid LIMIT $start, $count";
$result = mysqli_query($conn, $sql);
$orderList = mysqli_fetch_all($result, MYSQLI_ASSOC);
//遍历每个订单，查询该订单所购买的产品信息
foreach($orderList as $i=>$order){
$oid = $order['oid']; //订单编号
$sql = "SELECT * FROM jd_product WHERE pid IN (SELECT productId FROM jd_order_detail WHERE orderId=$oid)";//根据订单编号查询产品编号，再查询产品信息
$result = mysqli_query($conn,$sql);
$productList = mysqli_fetch_all($result, MYSQLI_ASSOC);
$orderList[$i]['productList'] = $productList;
}
//把查询到数据保存入输出数组！！！！
$output['data'] = $orderList;
echo json_encode($output);
网友评论