通用jQuery分页控件：jQuery Pagination plugin

最新推荐文章于 2024-08-31 10:08:14 发布

原创最新推荐文章于 2024-08-31 10:08:14 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

ADO.NET 专栏收录该内容

77 篇文章

订阅专栏

本文介绍了jQuery Pagination插件的使用，包括分页的常见功能、选项和事件设置，以及如何创建自定义链接和实现分页同步效果。通过实例代码展示如何配置最大可见页数、初始化点击事件和自定义分页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简述

分页是项目中最常见的功能，熟练掌握一种分页控件，有利于提高我们的开发效率。

jQuery Pagination plugin是我用得比较顺手的一个分页控件，基于jQuery，Bootstrap风格。

官网地址：http://esimakin.github.io/twbs-pagination/

三个常用的CSS样式：
.pagination
.active
.disabled

可以设置为pagination-sm分页按钮小样式

示例：
Html代码：

<ul id="pagination-demo" class="pagination-sm"></ul>

JS代码：

 $('#pagination-demo').twbsPagination({
        totalPages: 35,
        visiblePages: 7,
        onPageClick: function (event, page) {
            $('#page-content').text('Page ' + page);
        }
    });

选项和事件

可用来设置的选项和默认值：
totalPages 必须设置，总页数
startPage 当前页，默认值：1
visiblePages 最大可见页数，默认值：5
initiateStartPageClick 在插件初始化时，触发点击事件，默认值：true
href 分页链接模板，默认值：false
hrefVariable 页面在模板中的变量名称，默认值：{{number}}
first text label 第一页名称：(default: ‘First’)
prev text label 首页名称：(default: ‘Previous’)
next text label 下一页(default: ‘Next’)
last text label 最后页(default: ‘Last’)
loop 是否开启循环效果（旋转木马） (default: false)
paginationClass 你可以设置自己的分页样式，这个样式是分页的根元素样式，默认值css样式: pagination

事件：
onPageClick 分页点击事件
参数
event 对象
page 分页数

使用示例

使用href自定义分页链接：

$(selector).twbsPagination({
    totalPages: 35,
    visiblePages: 8,
    href: '?page={{number}}'
});

使用visiblePages设置10页可见：

$(selector).twbsPagination({
    totalPages: 35,
    visiblePages: 10,
});

同步分页效果
多个分页使用相同的类名可以实现分页同步的效果

自定义点击事件，链接模板，注意链接使用?开头，这样会重新加载真个页面，某些时候我们需要这样处理。

$(selector).twbsPagination({
    totalPages: 15,
    visiblePages: 5 ,
    href: '?a=&page={{number}}&c=d' ,
    onPageClick: function (event, page) {
        $('#not-spa-demo-content').text('Page ' + page);
    }
});

自定义点击事件，链接模板，注意使用#开头，不重新加载页面。

$(selector).twbsPagination({
    totalPages: 15,
    visiblePages: 5,
    href: '#page={{pageNumber}}&c=d',
    hrefVariable: '{{pageNumber}}',
    onPageClick: function (event, page) {
        ...
    }
});