html分页功能实现原理无美化，代码中有详细的注释

wlb1012768230

已于 2023-08-24 01:16:48 修改

阅读量865

点赞数 1

文章标签： html 前端

于 2023-08-24 01:10:22 首次发布

本文链接：https://blog.csdn.net/wlb1012768230/article/details/132463710

版权

html分页功能实现，代码中有详细的注释，代码中数据获取部分是由js实现的，当然你也可以替换成从后端获取

效果图片：

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>实现分页</title>
</head>
<body>
<!--分页实现逻辑-->
<!--
1、写一个存放分页内容的表
2、分页按钮   首页 上一页  下一页  最后一页  输入框  跳转到指定页

3、点击分页按钮 处罚js点击事件，不写后端数据存放在本地，本地根据按钮参数选择对应的参数
-->
<div align="center">
  <!-- 内容块 -->
  <table id="p-info" border="11">
    <caption>个人信息</caption>
    <thead>
    <tr>
      <td>id</td>
      <td>姓名</td>
      <td>年龄</td>
      <td>性别</td>
      <td>荣誉</td>
    </tr>
    </thead>

    <tbody>
    </tbody>

    <tfoot>

    </tfoot>
  </table>
  <!-- 分页按钮 -->
  <div><br/></div>
  <div>
    <button onclick="skip('hp')">首页</button>
    <button onclick="skip('pp')"> 上一页</button>
    <span id="cpn">第1页</span>
    <input id="cpnr" type="hidden">
    <span>/</span>
    <span id="tpn">共3页</span>
    <input id="mpnr" type="hidden">
    <button onclick="skip('np')">下一页</button>
    <button onclick="skip('lp')">最后一页</button>
    <input id="spn" type="text" value="1"/>
    <button onclick="skip('ssp')"> 跳转</button>
  </div>
</div>
<script type="text/javascript" charset="utf-8">
  window.onload = function () {
    alert("页面加载完成")
    skip("hp")
  }

  function skip(fn) {
    switch (fn) {
      case "hp":
        homePage();
        break;
      case "pp":
        previousPage();
        break;
      case "np":
        nextPage();
        break;
      case "lp":
        lastPage();
        break;
      case "ssp":
        skipToSpecificPage();
        break;
      default:
        alert("跳转功能有问题,联系运营人员");
    }

    function homePage() {
      let pageData = getSpecificPage(1);
      renderTable(pageData);
    }

    function previousPage() {
      let currentPageNum = document.getElementById("cpnr").getAttribute("value");
      let previousPageNum = currentPageNum - 1;
      previousPageNum = previousPageNum > 0 ? previousPageNum : 1;
      let pageData = getSpecificPage(previousPageNum);
      renderTable(pageData);
    }

    function nextPage() {
      let currentPageNum = document.getElementById("cpnr").getAttribute("value");
      let nextPageNum = Number(currentPageNum) + 1;
      let maxPageNum = document.getElementById("mpnr").getAttribute("value");
      nextPageNum = nextPageNum > maxPageNum ? maxPageNum : nextPageNum;
      let pageData = getSpecificPage(nextPageNum);
      renderTable(pageData);
    }

    function lastPage() {
      let maxPageNum = document.getElementById("mpnr").getAttribute("value");
      let pageData = getSpecificPage(maxPageNum);
      renderTable(pageData);
    }

    function skipToSpecificPage() {
      let specificPageNum = document.getElementById("spn").value;
      let pageData = getSpecificPage(specificPageNum);
      renderTable(pageData);
    }

    function getSpecificPage(num, size) {
      size = 2;
      // 通过url异步访问后端程序
      //模拟数据库
      let wlb = {"id": "1", "name": "wlb", "age": "25", "sex": "男", "honor": "大专毕业"};
      let ls = {"id": "2", "name": "ls", "age": "25", "sex": "男", "honor": "大专毕业"};
      let ww = {"id": "3", "name": "ww", "age": "25", "sex": "男", "honor": "大专毕业"};
      let xm = {"id": "4", "name": "xm", "age": "25", "sex": "男", "honor": "大专毕业"};
      let personalInformationSet = [wlb, ls, ww, xm];

      //获取总记录数
      let pSetLength = personalInformationSet.length;
      // 根据页面大小计算分页总数
      let maxPageNum = pSetLength % size == 0 ? pSetLength / size : pSetLength / size + 1;
      // 判断指定的页码是否超过“最大或最小范围”，如果是将页码指定成“最大页码或最小页码”
      let currentPageNum = num;
      if (num > maxPageNum) {
        currentPageNum = maxPageNum;
      } else if (num < 1) {
        currentPageNum = 1;
      }
      // 计算需要跳过的记录总数
      let skipNum = (currentPageNum - 1) * size;

      // 【起始位置的由来】 由于跳过指定数量的记录后开始的记录序号和数组索引并非一一对应，故需要根据关系进行转换。越过了skipNum那么就是从skipNum后开始获取数据，即开始的序号为skipNum+1，然而数组中第一条的数据的索引是0，第二条数据订单索引是1，由此可得到这样的关系：1-0、2-1、。。。。。。n-n-1,那么第skipNum+1条数据对应的数组索引是skipNum。

      // 【结束条件的由来】 页面大小是“size”，越过的记录数是“skipNum“，第skipNum+1条是获取记录的起始位置，起始位置对应的索引是（skipNum+1）-1=skipNum。由于size为页面需要显示的条数，所以skipNum+size是最后一条记录的序号，对应数组的下标为skipNum+size-1，所以for循环的判定条件是i <= skipNum + size -1,由于i是整数也可以这样写：i < skipNum + size。由于i是整数，所以i的最大值是skipNum+size-1，即i < skipNum+size-1
     let condition = skipNum+size-1;
      // 模拟数据库分页操作
      let specificPageDataSet = new Array();
      for (let i = skipNum; i <= condition; ++i) {
        specificPageDataSet.push(personalInformationSet[i]);
      }

      const returnData = {
        "currentPageNum": currentPageNum,
        "totalPageNum": maxPageNum,
        "personalInformationSet": specificPageDataSet
      };

      if (num > returnData.totalPageNum) {
        console.warn("超出最大分页页码");
        alert("超出最大分页页码");
      } else if (num < 1) {
        console.warn("超过最小分页页码");
        alert("超过最小分页页码");
      }
      return returnData;
    }

    function renderTable(pageData) {
      let table = document.getElementById("p-info");
      let tbody = table.getElementsByTagName("tbody")[0];
      let tfoot = table.getElementsByTagName("tfoot")[0];
      tbody.remove();
      tfoot.remove();
      let personalInformationSet = pageData.personalInformationSet;
      let dataNum = personalInformationSet.length;
      let statistics = dataNum;
      let newTbody = document.createElement("tbody");
      let newTfoot = document.createElement("tfoot");
      for (let i = 0; i < dataNum; ++i) {
        let tr = document.createElement("tr");

        let idTd = document.createElement("td");
        let nameTd = document.createElement("td");
        let ageTd = document.createElement("td");
        let sexTd = document.createElement("td");
        let honorTd = document.createElement("td");

        let idTextNode = document.createTextNode(personalInformationSet[i].id);
        let nameTextNode = document.createTextNode(personalInformationSet[i].name);
        let ageTextNode = document.createTextNode(personalInformationSet[i].age);
        let sexTextNode = document.createTextNode(personalInformationSet[i].sex);
        let honorTextNode = document.createTextNode(personalInformationSet[i].honor);

        idTd.append(idTextNode);
        nameTd.append(nameTextNode);
        ageTd.append(ageTextNode);
        sexTd.append(sexTextNode);
        honorTd.append(honorTextNode);

        tr.appendChild(idTd);
        tr.appendChild(nameTd);
        tr.appendChild(ageTd);
        tr.appendChild(sexTd);
        tr.appendChild(honorTd);

        newTbody.appendChild(tr);

      }

      let footTr = document.createElement("tr");
      let footTd = document.createElement("td");
      let textNode = document.createTextNode("共" + statistics + "人");

      footTd.appendChild(textNode);
      footTr.appendChild(footTd);
      newTfoot.appendChild(footTr);

      table.appendChild(newTbody);
      table.appendChild(newTfoot);


      let cpn = document.getElementById("cpn");
      let cpnr = document.getElementById("cpnr");
      let tpn = document.getElementById("tpn");
      let mpnr = document.getElementById("mpnr");

      cpn.innerText = "第" + pageData.currentPageNum + "页";
      cpnr.setAttribute("value", pageData.currentPageNum);
      tpn.innerText = "共" + pageData.totalPageNum + "页";
      mpnr.setAttribute("value", pageData.totalPageNum);
    }
  }

</script>
<!--<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>-->
</body>
</html>