Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 96%



使用jquery.pagination实现“分页”(一)

2017-12-25 » Javascript / DataTable , jQuery , Tutorial

与 Vue、React 等 MVVM 框架无关,相信这类框架在 NPM 上也能找到很多“分页交互”的 node_modules 和教程。


基于 jQuery 的分页组件有许多,我常用的为 jquery_pagination ,具体 API 介绍可以参考 jquery.pagination.js分页插件的运用 。接下来我也将以该扩展为例,分享“分页交互”的构建方式。


每个分页交互逻辑,不论最简单的分页,还是包含各种筛选条件、排序等复杂的分页,必不可少的变量:ROWS(总数据条目数)PER_PAGE(每页所显示的条目数)、CURRENT_PAGE(当前页码数)

后端需要 PER_PAGE 、CURRENT_PAGE 进行 SQL 查询,这样可以得出当前页的数据。

前端需要这些变量来初始化分页组件,它们可以让分页组件得出:

* 总页数(ROWS / PER_PAGE)
* 上/下一页高亮样式显示(存在上/下一页时,高亮显示该按钮,否则禁用按钮点击效果)
* 当前页高亮显示(更好的提示用户当前处于哪一页)

根据上述,初始化一个分页组件,前端需要知道 ROWS & PER_PAGE。

ROWS 需要使用 AJAX 从服务端拉取,我们可以定义一个函数,用来处理 ROWS:

// 获取总条目数
function getRows() {
    $.post('/api/getRows', function (response) {
        // 在这个回调中,假设 response.rows 为总数据条目数,response.per_page 为每页显示条目数
    });
}

PER_PAGE 这个变量的值,可以前后端约定为某个固定值(如:10)或者由服务端确定,也可以通过 getRows() 从服务端返回,将其至为一个全局的 Javascript 变量。


接下来,我们需要初始化分页组件。首先我们需要在页面中添加挂载分页组件的 DOM 容器:

<div id="table-pagination" class="pagination"></div>

在初始化分页组件时,由于服务端的 SQL 在拼接分页查询时,第一页是从 0 开始,所以在前端传当前页码数时,一定要做 -1 处理!当前端需要获取第一页的数据时,CURRENT_PAGE 应该传 0,获取第二页时应该传 1,以此类推。

有的分页组件,只需要在初始化组件时,初始化 cuurent_page 为 0,即可达到上述的效果。而有些组件会默认帮你 +1,在使用不同分页组件时,请详细看清它的相关 API 文档,对照文档设置好正确的当前页码数!

分页组件的初始化过程,也可封装成一个单独的函数便于调用:

/**
* 初始化分页组件
* @param {type} data {rows, per_page}
*/
function initPagination(data) { 
    $("#table-pagination").pagination(data.rows, {
        current_page: 0, // 当前页从第一页开始(这里做了 -1 处理)
        items_per_page: data.per_page, // 每页显示条目数
        rev_text: "上一页",
        next_text: "下一页",
        num_edge_entries: 1,
        num_display_entries: 10,
        prev_show_always: true,
        next_show_always: true,
        callback: function (page) {
            // 分页组件的回调函数
        }
    });
}

现在我们获取了总数据条目数,初始化分页组件,剩下的就是在用户点击页码数或上/下一页时,我们需要通过 AJAX 从服务端拉取当前页的数据,仍然封装一个函数,用于处理加载当前页分页数据:

// 拉取当前页数据
function loadData(page) {
    $.post('/api/getPageData', {current_page: page}, function (data) {
        // data 即为服务端返回的当前页(page)的数据
    });
} 

获取总条目数/每页显示条目数 =》初始化分页组件 =》在分页组件回调函数中获取当前页码数 =》 根据当前页码数获取当前页数据 

整理后,即可得到完整的构建思路:

展开选填信息