前端小demo-分页

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
  <table>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>

  </table>
  <table id="result">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>

  </table>
  <div id="barcon"></div>
  <script>
    window.onload = function () {
      goPage(1)
    }

    function goPage(pno) {
      var itable = document.getElementById("result");
      var num = itable.rows.length; //表格所有行数(所有记录数)
      console.log(num);
      var totalPage = 0; //总页数
      var pageSize = 3; //每页显示行数
      //总共分几页
      if (num / pageSize > parseInt(num / pageSize)) {
        totalPage = parseInt(num / pageSize) + 1;
      } else {
        totalPage = parseInt(num / pageSize);
      }
      var currentPage = pno; //当前页数
      var startRow = (currentPage - 1) * pageSize + 1; //开始显示的行  31
      var endRow = currentPage * pageSize; //结束显示的行   40
      endRow = (endRow > num) ? num : endRow; //40
      //遍历显示数据实现分页
      for (var i = 1; i < (num + 1); i++) {
        var irow = itable.rows[i - 1];
        if (i >= startRow && i <= endRow) {
          irow.style.display = "table-row";
        } else {
          irow.style.display = "none";
        }
      }
      var pageEnd = document.getElementById("pageEnd");
      var tempStr = "<span>共" + totalPage + "页</span>";
      if (currentPage > 1) {
        tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (1) + ")\">首页</span>";
        tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (currentPage - 1) + ")\">上一页</span>"
      } else {
        tempStr += "<span class='btn spanbtn'>首页</span>";
        tempStr += "<span class='btn spanbtn'>上一页</span>";
      }

      if (totalPage == 1) {
        tempStr += "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" + currentPage +
          "</span></a>"

      } else if (totalPage == 2 && currentPage == 1) {
        tempStr += "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn pageicon nowpage'>" + currentPage +
          "</span></a>" + "<a onclick=\"goPage(" + (currentPage + 1) + ")\"><span class='spanbtn pageicon'>" +
          (currentPage + 1) + "</span></a>"
      } else if (totalPage == 2 && currentPage == 2) {
        tempStr += "<a onclick=\"goPage(" + (currentPage - 1) + ")\"><span class='spanbtn pageicon'>" + (currentPage -
            1) + "</span></a>" + "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" +
          currentPage + "</span></a>"
      } else if (totalPage >= 3 && currentPage == 1) {
        tempStr += "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" + currentPage +
          "</span></a>" + "<a onclick=\"goPage(" + (currentPage + 1) + ")\"><span class='spanbtn pageicon'>" +
          (currentPage + 1) +
          "</span></a>" + "<a onclick=\"goPage(" + (currentPage + 2) + ")\"><span class='spanbtn pageicon'>" + (
            currentPage + 2) +
          "</span></a>"
      } else if (totalPage >= 3 && currentPage == totalPage) {
        tempStr += "<a onclick=\"goPage(" + (currentPage - 2) + ")\"><span class='spanbtn pageicon'>" + (currentPage -
            2) +
          "</span></a>" + "<a onclick=\"goPage(" + (currentPage - 1) + ")\"><span class='spanbtn pageicon'>" +
          (currentPage - 1) +
          "</span></a>" + "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage  pageicon'>" +
          currentPage +
          "</span></a>"
      } else {
        tempStr += "<a onclick=\"goPage(" + (currentPage - 1) + ")\"><span class='spanbtn pageicon'>" + (currentPage -
            1) +
          "</span></a>" + "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" +
          currentPage +
          "</span></a>" + "<a onclick=\"goPage(" + (currentPage + 1) + ")\"><span class='spanbtn pageicon'>" + (
            currentPage + 1) +
          "</span></a>"
      }

      if (currentPage < totalPage) {
        tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (currentPage + 1) + ")\">下一页</span>";
        tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (totalPage) + ")\">尾页</span>";
      } else {
        tempStr += "<span class='btn spanbtn'>下一页</span>";
        tempStr += "<span class='btn spanbtn'>尾页</span>";
      }

      document.getElementById("barcon").innerHTML = tempStr;

    }
  </script>
</body>

</html>
猜你喜欢
