js实现无刷新分页

最新推荐文章于 2026-04-02 02:27:41 发布

原创最新推荐文章于 2026-04-02 02:27:41 发布 · 450 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html

这个博客展示了如何使用JavaScript实现一个简单的前端分页功能。通过创建HTML结构、定义样式和编写JavaScript代码，实现了根据数据总量、每页显示条数动态生成分页导航，并在点击页码时切换显示相应页的数据。示例中，数据是一组预生成的文本条目，通过计算得出总页数并绑定点击事件来更新内容区域的数据展示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #page a {
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="content"></div>
    <!-- 分为一个内容，以及页码 -->
    <div id="page"></div>
    <script>
      var data = []; //已有的数据
      var total = 101; //数据总条数
      var perPage = 10; //每页显示的条数
      for (var i = 1; i <= total; i++) {
        data.push("我是第" + i + "条数据");
      }
      //   首先生成101条数据
      // 生成出分页导航 并且实现 每个数字页点击更换对应的的数据 点击事件使用行内绑定
      var totalPage = Math.ceil(total / perPage);
      // 1、显示分页导航
      var html = "";
      for (var i = 1; i <= totalPage; i++) {
        // javascript:; 表示执行js的空代码  可以将js代码设置在:;直接 可以避免a标签的点击刷新页面
        html +=
          '<a href ="javascript:;" onclick = "changePage(' +
          i +
          ')">S' +
          i +
          "</a>";
      }
      document.querySelector("#page").innerHTML = html;
      // 上面是生成分页
      // 显示指定页数的对应的数据
      function changePage(page) {
        if (page <= 0 || page > totalPage) {
          return;
        }
        var html = "";
        // 这里有一个重置的操作。如果不重置的话就不要再这里加
        /*
                page = 1 显示数据下标为0-10直接的数据
                page = 2 显示数据下标为10-20直接的数据
                page = 3 显示数据下标为20-30直接的数据
                page = n 显示数据下标为 (n-1) * perPage - n*perPage
            */
        //    page = 11 下标从100 - 110之间
        // 计算结束的下标
        var endIndex = page * perPage < total ? page * perPage : total;
        for (var i = (page - 1) * perPage; i < endIndex; i++) {
          html += "<p>" + data[i] + "</p>";
        }

        document.querySelector("#content").innerHTML = html;
      }
      changePage(1);
    </script>
  </body>
</html>