html动态分页代码

在开发网页时，我们经常会遇到数据量过大需要使用分页的情况。这时候我们可以使用HTML动态分页代码来实现。以下是一个简单的HTML动态分页代码示例：

<!doctype html>
<html>
  <head>
    <title>分页示例</title>
    <Meta charset='utf-8'>
    <style>
      #Pagelist a {padding: 5px 10px; background-color: #eee;}
      #Pagelist a.current {background-color: #aaa; color: #fff;}
    </style>
  </head>
  <body>
    <div id='datalist'>
      <ul>
        <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>
      </ul>
    </div>
    <div id='Pagelist'>
    </div>
    <script>
      var data = document.querySelectorAll('#datalist li');
      var pageSize = 5; //每页显示5条数据
      var totalPage = Math.ceil(data.length / pageSize); //计算总页数
      var currentPage = 1; //当前页数
      var start = (currentPage - 1) * pageSize; //起始数据位置
      var end = start + pageSize; //结束数据位置
      var html = '';
      for(var i = start; i < end; i++) {
        if(i < data.length) {
          html += '<li>' + data[i].innerHTML + '</li>';
        }
      }
      document.querySelector('#datalist ul').innerHTML = html; //渲染第一页数据
      html = '';
      for(var i = 1; i <= totalPage; i++) {
        html += '<a href="javascript:;" onclick="getPage(' + i + ')"';
        if(i == currentPage) {
          html += ' class="current"';
        }
        html += '>' + i + '</a>';
      }
      document.querySelector('#Pagelist').innerHTML = html; //渲染分页列表
      function getPage(page) {
        currentPage = page; //设置当前页数
        start = (currentPage - 1) * pageSize; //重新计算起始数据位置
        end = start + pageSize; //重新计算结束数据位置
        html = '';
        for(var i = start; i < end; i++) {
          if(i < data.length) {
            html += '<li>' + data[i].innerHTML + '</li>';
          }
        }
        document.querySelector('#datalist ul').innerHTML = html; //渲染对应页数的数据
        html = '';
        for(var i = 1; i <= totalPage; i++) {
          html += '<a href="javascript:;" onclick="getPage(' + i + ')"';
          if(i == currentPage) {
            html += ' class="current"';
          }
          html += '>' + i + '</a>';
        }
        document.querySelector('#Pagelist').innerHTML = html; //渲染分页列表
      }
    </script>
  </body>
</html>

html动态分页代码

上述代码将数据列表中的15条数据分为了3页，每页显示5条数据。通过getPage函数来实现分页功能，该函数根据传入的页码计算起始和结束数据位置，并重新渲染数据和分页列表。同时使用CSS样式来美化分页效果。

相关推荐