本文介绍使用 jQuery 实现分页完整代码（包含处理数据生成HTML），而不是使用 URL 的 page 参数实现分页。

jQuery分页代码实现分页功能的步骤：

  • 定义一个数组作为后端返回的数据
  • 使用JS将一维数组转换为二维数组
  • 使用 jQuery 将二维列表生成HTML
  • 使用jQuery实现分页功能

jQuery分页代码效果图

JS分页效果图

定义一维数组数据

在HTML文件的<script></script>标记内添加一维数组数据，注意：<script>标记要在</body>标记的前面，因为需要等待<body>加载完成，再操作HTML元素。

jQuery分页代码使用的数组数据如下：

const article_1d = [
  {"title": "PhpStorm破解版下载", "author": "anxin"},
  {"title": "原生JS实现分页功能", "author": "anxin"},
  {"title": "WebStorm破解版下载", "author": "anxin"},
  {"title": "IntelliJ IDEA破解版下载", "author": "anxin"},
  {"title": "JavaScript为HTML元素删除CSS", "author": "anxin"},
  {"title": "JavaScript为HTML元素添加CSS", "author": "anxin"},
  {"title": "Markdown代码中进行缩进和换行", "author": "anxin"},
  {"title": "Javascript为元素添加事件监听器", "author": "anxin"},
  {"title": "Pycharm Pro破解版下载", "author": "anxin"},
  {"title": "GoLand破解版下载", "author": "anxin"},
  {"title": "RubyMine破解版下载", "author": "anxin"},
  {"title": "Adobe Acrobat Pro破解版下载", "author": "anxin"},
  {"title": "DataSpell破解版下载", "author": "anxin"},
  {"title": "Adobe XD CC破解版下载", "author": "anxin"},
  {"title": "Rider破解版下载", "author": "anxin"},
  {"title": "网站内容如何使必应快速收录：向Bing提交链接", "author": "anxin"},
  {"title": "网站内容如何使百度快速收录：向百度提交链接 ", "author": "anxin"},
  {"title": "FreeBSD 13使用PIP包安装 Let's Encrypt Certbot为Apache启用Https", "author": "anxin"},
  {"title": "Ubuntu 如何安装KDE Plasma桌面环境", "author": "anxin"},
  {"title": "网站中使用本地文件加载Font Awesome 6字体图标", "author": "anxin"},
]

使用JS将一维数组转换为二维数组

jQuery主要是在前端处理DOM数据，在jQuery分页代码中将一维数组转换为二维数组需要使用原生JavaScript代码，利用JS数组的forEach()函数遍历一维数组内的每个元素，使JS实现一维数组对象转换二维数组。

JS将一维数组转换为二维数组的代码：

var article_2d = []
const cols = 5

var row = 0
var col = 0

article_1d.forEach((item) => {
  if (col == 0) {
    article_2d.push([]);
    article_2d.at(row).push(item);
    col += 1;
  } else if (col < cols) {
    article_2d.at(row).push(item)
    col += 1
  } else {
    row += 1;
    article_2d.push([])
    article_2d.at(row).push(item)
    col = 1
  }
});

关于JS实现一维对象数组转换二维数组的详细信息查看：JS实现一维对象数组转换二维数组

将二维数组生成HTML

利用jQuery.each()函数遍历数组内的每个元素，实现jQuery分页代码中处理JavaScript二维数组内的所有元素，利用jQuery操作DOM的函数生成HTML。

将二维数组生成HTML的代码：

// 把二维数组内的数据生成HTML
$("body").append("<div id='pagedArticle' class='paged-article container d-flex flex-column custom-padding'></div>");
pagedArticleElement = $("#pagedArticle");
$.each(article_2d, function (index, element) {
  let text = "";
  $.each(element, function (index, innerElement) {
    text += "<div class='d-flex justify-content-between mb-2'><h3 className=\"fs-6\">" + innerElement.title + "</h3><p>" + innerElement.author + "</p></div>";
  })
  if (index==0) {
    pagedArticleElement.append("<div class='pa-pg d-block'>" + text + "</div>")
  } else {
    pagedArticleElement.append("<div class='pa-pg d-none'>" + text + "</div>")
  }
});

// 添加页码
let numText = "";
for (let i = 1; i <= rows; i++) {
  if (i == 1) {
    numText += "<i class='pa-pn-num active'>1</i>"
  } else {
    numText = numText + "<i class='pa-pn-num'>" + i.toString() + "</i>";
  }
}
pagedArticleElement.append("<div id='pa-pn' class='pa-pn text-center mt-2'>" + numText + "</div>")

代码解释：

  • $("body").append()为创建的最外层的div，jQuery在添加元素的过程中可以直接添加属性，如 id，class 属性
  • $.each(arr, function (index, element) {})是嵌套的循环，外层的循环是创建代表一个分页的div，内层的循环是生成该页面内的文章列表的文本，然后作为外层div的文本添加到DOM中。
  • 代码中使用了Boostrap的CSS
  • "添加页码"部分是创建分页的序号

本例中使用的自定义的CSS代码：

.pa-pn-num {
  cursor: pointer;
  font-size: 16px;
  font-style: normal;
  margin: 0 5px;
  display: inline-block;
  text-align: center;
  height: 28px;
  line-height: 28px;
  width: 28px;
  border: 1px solid #222;
  border-radius: 17px;
  background: #222;
  color: #fff;
}
.pa-pn-num:hover {
  background: #f4645f;
  border: 0;
}
.pa-pn-num.active, .pa-pn-num.active:hover {
  background: #fff;
  color: #222;
  border: 1px solid #222;
}

jQuery分页代码

HTML已经生成，只需实现当点击分页的页码时，显示对应的<div class="pa-pg“>内的内容（所有的<div class="pa-pg“>元素相当于一个数组，其在数组中下标与页码所对应），隐藏其他div内的内容。

jQuery分页代码示例代码如下，最简洁的jQuery分页代码：

$("#pa-pn .pa-pn-num").click(function() {
  var n = parseInt($(this).text()) - 1;
  $("#pagedArticle .pa-pg").removeClass("d-block").addClass("d-none");
  $($("#pagedArticle .pa-pg")[n]).removeClass("d-none").addClass("d-block");
  $("#pa-pn .pa-pn-num").removeClass("active");
  $(this).addClass("active");
});

还可以使用如下jQuery分页代码，该jQuery分页代码的时间复杂度可能小于上面代码的时间复杂度（作者不确定）：

var pageArticleNum = $("#pa-pn .pa-pn-num");
pageArticleNum.click(function() {
  var n = parseInt($(this).text()) - 1;
  $("#pagedArticle .pa-pg").each(function (index) {
    if (index == n) {
      $(this).removeClass("d-none").addClass("d-block");
    } else {
      $(this).removeClass("d-block").addClass("d-none");
    }
  });
  pageArticleNum.each(function (index) {
    if (index == n) {
      $(this).addClass("active");
    } else {
      $(this).removeClass("active");
    }
  });
});

jQuery分页完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/5.3.1/css/bootstrap.min.css">
    <title>jQuery分页完整代码</title>
    <style>
      .custom-padding {
        padding: 50px 200px;
      }
      .pa-pn-num {
        cursor: pointer;
        font-size: 16px;
        font-style: normal;
        margin: 0 5px;
        display: inline-block;
        text-align: center;
        height: 28px;
        line-height: 28px;
        width: 28px;
        border: 1px solid #222;
        border-radius: 17px;
        background: #222;
        color: #fff;
      }
      .pa-pn-num:hover {
        background: #f4645f;
        border: 0;
      }
      .pa-pn-num.active, .pa-pn-num.active:hover {
        background: #fff;
        color: #222;
        border: 1px solid #222;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
    <script>
      const article_1d = [
        {"title": "PhpStorm破解版下载", "author": "anxin"},
        {"title": "原生JS实现分页功能", "author": "anxin"},
        {"title": "WebStorm破解版下载", "author": "anxin"},
        {"title": "IntelliJ IDEA破解版下载", "author": "anxin"},
        {"title": "JavaScript为HTML元素删除CSS", "author": "anxin"},
        {"title": "JavaScript为HTML元素添加CSS", "author": "anxin"},
        {"title": "Markdown代码中进行缩进和换行", "author": "anxin"},
        {"title": "Javascript为元素添加事件监听器", "author": "anxin"},
        {"title": "Pycharm Pro破解版下载", "author": "anxin"},
        {"title": "GoLand破解版下载", "author": "anxin"},
        {"title": "RubyMine破解版下载", "author": "anxin"},
        {"title": "Adobe Acrobat Pro破解版下载", "author": "anxin"},
        {"title": "DataSpell破解版下载", "author": "anxin"},
        {"title": "Adobe XD CC破解版下载", "author": "anxin"},
        {"title": "Rider破解版下载", "author": "anxin"},
        {"title": "网站内容如何使必应快速收录：向Bing提交链接", "author": "anxin"},
        {"title": "网站内容如何使百度快速收录：向百度提交链接 ", "author": "anxin"},
        {"title": "FreeBSD 13使用PIP包安装 Let's Encrypt Certbot为Apache启用Https", "author": "anxin"},
        {"title": "Ubuntu 如何安装KDE Plasma桌面环境", "author": "anxin"},
        {"title": "网站中使用本地文件加载Font Awesome 6字体图标", "author": "anxin"},
      ]
      var article_2d = []
      const cols = 5
      const rows = 4

      var row = 0
      var col = 0

      article_1d.forEach((item) => {
        if (col == 0) {
          article_2d.push([]);
          article_2d.at(row).push(item);
          col += 1;
        } else if (col < cols) {
          article_2d.at(row).push(item)
          col += 1
        } else {
          row += 1;
          article_2d.push([])
          article_2d.at(row).push(item)
          col = 1
        }
      });

      // 把二维数组内的数据生成HTML
      $("body").append("<div id='pagedArticle' class='paged-article container d-flex flex-column custom-padding'></div>");
      pagedArticleElement = $("#pagedArticle");
      $.each(article_2d, function (index, element) {
        let text = "";
        $.each(element, function (index, innerElement) {
          text += "<div class='d-flex justify-content-between mb-2'><h3 className=\"fs-6\">" + innerElement.title + "</h3><p>" + innerElement.author + "</p></div>";
        })
        if (index==0) {
          pagedArticleElement.append("<div class='pa-pg d-block'>" + text + "</div>")
        } else {
          pagedArticleElement.append("<div class='pa-pg d-none'>" + text + "</div>")
        }
      });

      // 添加页码
      let numText = "";
      for (let i = 1; i <= rows; i++) {
        if (i == 1) {
          numText += "<i class='pa-pn-num active'>1</i>"
        } else {
          numText = numText + "<i class='pa-pn-num'>" + i.toString() + "</i>";
        }
      }
      pagedArticleElement.append("<div id='pa-pn' class='pa-pn text-center mt-2'>" + numText + "</div>")

      var pageArticleNum = $("#pa-pn .pa-pn-num");
      pageArticleNum.click(function() {
        var n = parseInt($(this).text()) - 1;
        $("#pagedArticle .pa-pg").each(function (index) {
          if (index == n) {
            $(this).removeClass("d-none").addClass("d-block");
          } else {
            $(this).removeClass("d-block").addClass("d-none");
          }
        });
        pageArticleNum.each(function (index) {
          if (index == n) {
            $(this).addClass("active");
          } else {
            $(this).removeClass("active");
          }
        });
      });
    </script>
  </body>
</html>

总结

本文介绍了使用jQuery实现分页功能的完整代码，该jQuery分页代码从最开始的将一维数组转换为二维数组，然后再使用原生JS将二维列表生成HTML，最后使用jQuery实现分页功能。该文章包含了jQuery实现分页完整代码，以供学习使用。