原生js分页效果

来源：互联网发布：智能后视镜安装软件编辑：程序博客网时间：2024/06/06 21:40

2017年4月份，我去无锡某软件公司面试，项目经理当时问到一个问题：怎么实现分页效果，说明实现的原理？当时觉得分页是个极其复杂的技术难点，也没回答的很完整。现总结原生js实现分页效果与此，并附上详细注释：

总结：分页必须要搞清楚几个参数：
1、一共几条数据
2、每页显示几条数据（x）
3、一共几页
难点：点击第n页时，显示哪几条数据(n-1)*x+1～n*x条数据（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);

阅读全文

0 0