您可以使用 jquery 分页,它简单快捷。请按照我已经深入描述的以下步骤进行操作
获取包含插件和 CSS 主题 here 的 zip。
第 1 步:与 JQuery 一起,在您的页面中包含 jquery.simplePagination.js:
<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.simplePagination.js"></script>
建议使用 JQuery 1.7.2 或更高版本。旧版本可能也可以,但我还没有测试过。
第 2 步:可选 - 包含具有 3 个默认主题的 CSS 文件
<link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/>
如果跳过此步骤,则需要定义自己的样式或使用Bootstrap。
第 3 步:在分页占位符上调用函数:
$(function() {
$(selector).pagination({
items: 100,
itemsOnPage: 10,
cssStyle: 'light-theme'
});
});
如果需要,您可以直接通过“pages”参数指定页数,而不是插件用来自动计算页数的“items”和“itemsOnPage”。
可用选项
items 整数 默认值:1 将用于计算页面的项目总数。
itemsOnPage 整数 默认值:1 每页显示的项目数。
pages Integer Optional 如果指定,items 和 itemsOnPage 将不用于计算页数。
displayedPages 整数 默认值:5 导航时应显示多少页码。
允许的最小值:3(上一个、当前和下一个)
edge 整数 默认值:2 在分页的开头/结尾处可见多少页码。
currentPage 整数 默认值:1 初始化后将立即选择哪个页面。
hrefTextPrefix String 默认值:“#page-” 用于构建 href 属性的字符串,添加在页码之前。
hrefTextSuffix 字符串 默认值:空字符串 另一个用于构建 href 属性的字符串,添加在页码之后。
prevText String 默认值:“Prev” 上一个按钮上显示的文本。
nextText String 默认值:“Next” 在下一个按钮上显示的文本。
labelMap Array 默认值:空数组 将用于呈现分页项的标签集合,替换数字。
cssStyle String 默认值:“light-theme” CSS 主题的类。
selectOnClick 布尔默认值:true 如果您不想在点击后立即选择页面,请设置为 false。
onPageClick(pageNumber, event) Function Optional 页面被点击时调用的函数。
页码和事件是可选参数。
onInit Function 可选 分页初始化时调用的函数。
可用方法
selectPage - 根据页码选择页面。
$(function() {
$(selector).pagination('selectPage', pageNumber);
});
prevPage - 选择上一页。
$(function() {
$(selector).pagination('prevPage');
});
nextPage - 选择下一页。
$(function() {
$(selector).pagination('nextPage');
});
getPagesCount - 返回总页数。
$(function() {
$(selector).pagination('getPagesCount');
});
getCurrentPage - 返回当前页码。
$(function() {
$(selector).pagination('getCurrentPage');
});
disable - 禁用分页功能。
$(function() {
$(selector).pagination('disable');
});
启用 - 在之前禁用后启用分页。
$(function() {
$(selector).pagination('enable');
});
destroy - 视觉上销毁分页,保留所有现有设置。
$(function() {
$(selector).pagination('destroy');
});
redraw - 使用现有设置再次绘制分页。 (例如,在您销毁分页后很有用)
$(function() {
$(selector).pagination('redraw');
});
updateItems - 允许动态更改分页渲染的项目数
$(function() {
$(selector).pagination('updateItems', 100);
});
updateItemsOnPage - 允许动态更改每个页面上呈现的项目数
$(function() {
$(selector).pagination('updateItemsOnPage', 20);
});
drawPage - 将页码作为参数,并将“currentPage”值设置为给定的页码并绘制分页
$(function() {
$(selector).pagination('drawPage', 5);
});