jQuery分页代码实现分页功能（在已有HTML的基础上）

anxin • 2024-02-20 • 文章类别： JavaScript • 阅读量：259

首页 > 文章 > 所有文章 > jQuery分页代码实现分页功能（在已有HTML的基础上）

本文介绍使用 jQuery 实现分页功能，并提供 jQuery分页代码，该功能的实现是在已有HTML结构的基础上，而不是使用 URL 的 page 参数实现分页。

如果你要实现从处理JS数据数据生成HTML，然后再使用原生JS实现分页功能请查看：原生JS实现分页功能完整代码

使用 jQuery 实现分页功能（jQuery分页代码）的步骤：

基于已有HTML结构
使用jQuery实现分页功能

jQuery分页代码效果图

已有HTML结构

在HTML文件中一个<div class="pa-pg">表示一个页面。本例中使用了Bootstrap CSS 类，方便进行HTML元素的布局。默认显示第一个页面（使用d-block Bootstrap CSS定义显示页面），隐藏其他的页面（使用d-none Bootstrap CSS定义隐藏页面）

HTML具体内容如下：

<div id="pagedArticle" class="paged-article container d-flex flex-column custom-padding">
  <div class="pa-pg d-block">
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">PhpStorm破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">原生JS实现分页功能</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">WebStorm破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">IntelliJ IDEA破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">JavaScript为HTML元素删除CSS</h3>
      <p>anxin</p></div>
  </div>
  <div class="pa-pg d-none">
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">JavaScript为HTML元素添加CSS</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Markdown代码中进行缩进和换行</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Javascript为元素添加事件监听器</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Pycharm Pro破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">GoLand破解版下载</h3>
      <p>anxin</p></div>
  </div>
  <div class="pa-pg d-none">
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">RubyMine破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Adobe Acrobat Pro破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">DataSpell破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Adobe XD CC破解版下载</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Rider破解版下载</h3>
      <p>anxin</p></div>
  </div>
  <div class="pa-pg d-none">
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">网站内容如何使必应快速收录：向Bing提交链接</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">网站内容如何使百度快速收录：向百度提交链接 </h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">FreeBSD 13使用PIP包安装 Let's Encrypt
      Certbot为Apache启用Https</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">Ubuntu 如何安装KDE Plasma桌面环境</h3>
      <p>anxin</p></div>
    <div class="d-flex justify-content-between mb-2">
      <h3 classname="fs-6">网站中使用本地文件加载Font Awesome 6字体图标</h3>
      <p>anxin</p></div>
  </div>
  <div id="pa-pn" class="pa-pn text-center mt-2">
    <i class="pa-pn-num active">1</i>
    <i class="pa-pn-num">2</i>
    <i class="pa-pn-num">3</i>
    <i class="pa-pn-num">4</i>
  </div>
</div>

使用的自定义的CSS代码

jQuery分页代码中除了使用Bootstrap CSS类外，使用到的自定义 CSS 代码：

.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;
}

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>
  <div id="pagedArticle" class="paged-article container d-flex flex-column custom-padding">
    <div class="pa-pg d-block">
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">PhpStorm破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">原生JS实现分页功能</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">WebStorm破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">IntelliJ IDEA破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">JavaScript为HTML元素删除CSS</h3>
        <p>anxin</p></div>
    </div>
    <div class="pa-pg d-none">
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">JavaScript为HTML元素添加CSS</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Markdown代码中进行缩进和换行</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Javascript为元素添加事件监听器</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Pycharm Pro破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">GoLand破解版下载</h3>
        <p>anxin</p></div>
    </div>
    <div class="pa-pg d-none">
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">RubyMine破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Adobe Acrobat Pro破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">DataSpell破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Adobe XD CC破解版下载</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Rider破解版下载</h3>
        <p>anxin</p></div>
    </div>
    <div class="pa-pg d-none">
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">网站内容如何使必应快速收录：向Bing提交链接</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">网站内容如何使百度快速收录：向百度提交链接 </h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">FreeBSD 13使用PIP包安装 Let's Encrypt
        Certbot为Apache启用Https</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">Ubuntu 如何安装KDE Plasma桌面环境</h3>
        <p>anxin</p></div>
      <div class="d-flex justify-content-between mb-2">
        <h3 classname="fs-6">网站中使用本地文件加载Font Awesome 6字体图标</h3>
        <p>anxin</p></div>
    </div>
    <div id="pa-pn" class="pa-pn text-center mt-2">
      <i class="pa-pn-num active">1</i>
      <i class="pa-pn-num">2</i>
      <i class="pa-pn-num">3</i>
      <i class="pa-pn-num">4</i>
    </div>
  </div>
  <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
  <script>
    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分页代码，本文介绍的jQuery分页代码是在已有的HTML的基础上，只介绍了jQuery分页代码。

标签：分页功能

后端编程语言

操作系统 & 服务器

HTML & CSS

JavaScript

框架 & CMS

数据库

SEO

文章首页

最新文章

Windows

Linux

FreeBSD

破解软件

非破解软件

软件首页

最新软件

操作系统 & 服务器

教程首页

框架 & CMS

文档首页

Web 开发工具

在线编辑器

格式转换工具

代码格式化工具

代码压缩工具

在线数字工具

在线对比工具

代码验证工具

在线中文工具

HTML 在线工具

JSON 在线工具

XML 在线工具

YAML 在线工具

CSV 在线工具

TSV 在线工具

TXT 在线工具

工具首页

jQuery分页代码实现分页功能（在已有HTML的基础上）

jQuery分页代码效果图

已有HTML结构

使用的自定义的CSS代码

jQuery分页代码

jQuery分页完整代码

总结

相关文章

jQuery实现分页完整代码(包含处理数据生成HTML)

JavaScript 为多元素添加监听事件修改元素或属性

Javascript 为元素添加事件监听器

0 评论