1.
与 Vue、React 等 MVVM 框架无关，相信这类框架在 NPM 上也能找到很多“分页交互”的 node_modules 和教程。
2.
基于 jQuery 的分页组件有许多，我常用的为 jquery_pagination ，具体 API 介绍可以参考 jquery.pagination.js分页插件的运用 。接下来我也将以该扩展为例，分享“分页交互”的构建方式。
3.
每个分页交互逻辑，不论最简单的分页，还是包含各种筛选条件、排序等复杂的分页，必不可少的变量：ROWS（总数据条目数）、PER_PAGE（每页所显示的条目数）、CURRENT_PAGE（当前页码数）。
后端需要 PER_PAGE 、CURRENT_PAGE 进行 SQL 查询，这样可以得出当前页的数据。
前端需要这些变量来初始化分页组件，它们可以让分页组件得出：
* 总页数（ROWS / PER_PAGE）
* 上/下一页高亮样式显示（存在上/下一页时，高亮显示该按钮，否则禁用按钮点击效果）
* 当前页高亮显示（更好的提示用户当前处于哪一页）
4.
根据 3.条目 中的叙述，初始化一个分页组件，前端需要知道 ROWS & PER_PAGE。
ROWS 需要使用 AJAX 从服务端拉取，我们可以定义一个函数，用来处理 ROWS：
// 获取总条目数function getRows() {
$.post('/api/getRows', function (response) {
// 在这个回调中，假设 response.rows 为总数据条目数，response.per_page 为每页显示条目数
});
}
PER_PAGE 这个变量的值，可以前后端约定为某个固定值（如：10）或者由服务端确定，也可以通过 getRows() 从服务端返回，将其至为一个全局的 Javascript 变量。
5.
接下来，我们需要初始化分页组件。首先我们需要在页面中添加挂载分页组件的 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, // 每页显示条目数
prev_text: "上一页",
next_text: "下一页",
num_edge_entries: 1,
num_display_entries: 10,
prev_show_always: true,
next_show_always: true,
callback: function (page) {
// 分页组件的回调函数
}
});
}
6.
现在我们获取了总数据条目数，初始化分页组件，剩下的就是在用户点击页码数或上/下一页时，我们需要通过 AJAX 从服务端拉取当前页的数据，仍然封装一个函数，用于处理加载当前页分页数据：
// 拉取当前页数据function loadData(page) {
$.post('/api/getPageData', {current_page: page}, function (data) {
// data 即为服务端返回的当前页（page）的数据
});
}
7.
获取总条目数/每页显示条目数 =》初始化分页组件 =》在分页组件回调函数中获取当前页码数 =》 根据当前页码数获取当前页数据
整理后，即可得到完整的构建思路：
