jQuery Pagination插件的用法（附带实例）

Pagination 插件是一款可以加载数据和进行数据分页的第三方 jQuery 插件。

使用 Pagination 时，一般需要先将要显示的数据加载到页面中，然后根据当前页面的索引号，获取指定页面需要显示的数据，并将这部分数据显示到相应的容器中，从而实现分页显示数据的功能。

注意，Pagination 插件由于需要一次性加载数据，因此在分页切换时无刷新与延迟，但是如果数据量较大，不建议使用该插件，因为加载会比较慢。

与一般的 jQuery 插件一样，Pagination 插件的使用也很简单。例如，要使用 Pagination 插件，即使用方法 pagination()，可以用如下的代码：

$("#page").pagination(100);

使用浏览器运行 index.html 文件，效果如下图所示：

图 1 使用 Pagination 插件实现分页列表

分页列表需要放在 class 属性值为 pagination 的标记内，可以使用 text-align 属性控制分页列表居中显示还是居右显示。

Pagination 插件的常用属性及说明如下表所示：

表：Pagination 插件的常用属性及说明
属性	说明
maxentries	总条目数
items_per_page	每页显示的条目数
num_display_entries	在连续分页主体部分显示分页条目数
current_page	当前选中的页面
num_edge_entries	显示的首尾分页的条目数
link_to	分页的链接
prev_text	“上一页”分页按钮上显示的文字
next_text	“下一页”分页按钮上显示的文字
ellipse_text	省略的页数用什么文字表示
prev_show_always	是否显示“上一页”分页按钮
next_show_always	是否显示“下一页”分页按钮
callback	回调函数，一般用来装载对应分页显示的内容

【实例】本实例使用 Pagination 插件制作一个分页显示数据的网页，其中要分页显示的数据需要通过 AJAX 异步获取。程序开发步骤如下：
1) 新建一个 index.html 文件，将其放到 demo 文件夹中。

2) 将 Pagination 插件所用的 jquery.min.js 脚本文件、jquery.pagination.js 脚本和 pagination.css 样式文件复制到 demo 文件夹中。

3) 新建一个 load.html 文件，存放在 demo 文件夹中，该文件主要用来定义要异步获取的数据。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <div class="result">异步获取的内容：ASP.NET</div>
  <div class="result">异步获取的内容：PHP</div>
  <div class="result">异步获取的内容：Java Web</div>
  <div class="result">异步获取的内容：jQuery</div>
  <div class="result">异步获取的内容：JavaScript</div>
  <div class="result">异步获取的内容：AJAX</div>
  <div class="result">异步获取的内容：Java</div>
  <div class="result">异步获取的内容：C#</div>
  <div class="result">异步获取的内容：Android</div>
  <div class="result">异步获取的内容：Visual C++</div>
</body>
</html>

4) 使用 VS Code 打开 index.html 文件，在该文件中使用 AJAX 技术从 load.html 文件中异步获取要分页显示的数据，然后通过设置 Pagination 插件的属性对异步获取的数据进行分页显示。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用 Pagination 插件实现数据分页显示</title>
<link rel="stylesheet" href="pagination/pagination.css"/>
<script type="text/javascript" src="pagination/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="pagination/jquery.pagination.js"></script>
<script type="text/javascript">
$(function () {
    // 通过 AJAX 加载分页元素
    var initPagination = function () {
        var num_entries = $("#hiddenresult div.result").length;
        // 创建分页
        $("#Pagination").pagination(num_entries, {
            num_edge_entries: 1,      // 边缘页数
            num_display_entries: 4,   // 连续分页主体部分显示的分页条目数
            callback: pageselectCallback,
            items_per_page: 1,        // 每页显示 1 条
            prev_text: "Prev",
            next_text: "Next"
        });
    };

    function pageselectCallback(page_index, jq) {
        var new_content = $("#hiddenresult div.result:eq(" + page_index + ")").clone();
        $("#Searchresult").empty().append(new_content);   // 加载对应分页的数据
        return false;
    }

    // AJAX 异步获取要分页显示的数据
    $("#hiddenresult").load("load.html", null, initPagination);
});
</script>
</head>
<body style="font-size:84%; color:#00F; line-height:1.4;">
  <h1>使用 Pagination 插件实现数据分页显示</h1>
  <div id="Pagination" class="pagination"></div>
  <div id="Searchresult" style="width:300px; height:100px; padding:20px; background:#9CF;"></div>
  <div id="hiddenresult" style="display:none;"></div>
</body>
</html>

使用浏览器运行 index.html 文件，效果如下图所示：

图 2 Pagination 插件的使用

jQuery Pagination插件的用法（附带实例）

相关文章