网站建设（三）分页插件（一）一块基于bootstrap的分页插件

用户7293182

发布于 2022-01-20 17:19:52

6240

发布于 2022-01-20 17:19:52

文章被收录于专栏：jQuery每日经典jQuery每日经典

声明一下：所有的网站建设系列文章，可点击菜单分享资料 => 插件分析查看

网站建设系列是收集网站使用到的各种demo。包括 JavaScript 插件，JavaScript组件，常用 css 等多方面。

主要参考bootcdn，以及GitHub上的资源进行说明。如果时间允许，会将这些所有内容进行逐一对比。

一、依赖

该插件依赖 jQuery.js (1.7.0 或者更高)，以及Bootstrap CSS 或者自己定义css样式。

二、基础demo

HTML

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

2. JavaScript代码

$('#pagination-demo').twbsPagination({

totalPages: 35,

visiblePages: 7,

onPageClick: function (event, page) { $('#page-content').text('Page ' + page); } });

3. 效果展示

4. 必须支持异步加载

var $pagination = $('selector');

var defaultOpts = {

totalPages: 20 }; $pagination.twbsPagination(defaultOpts); $.ajax({ ...,

success: function (data) {

var totalPages = data.newTotalPages;

var currentPage = $pagination.twbsPagination('getCurrentPage'); $pagination.twbsPagination('destroy'); $pagination.twbsPagination($.extend({}, defaultOpts, { startPage: currentPage,

totalPages: totalPages })); } });

三、可配置参数介绍

Option name	Description	Type	Default value
totalPages	The number of pages	Number	1
startPage	The current page that show on start	Number	1
visiblePages	Max visible pages	Number	5
initiateStartPageClick	Fire click at start page when plugin initialized	Bool	true
hideOnlyOnePage	This hides all control buttons if it has one page	Bool	false
href	Generate query string or generate #	Bool	false
pageVariable	Template that will be replaced with page number	String	'{{page}}'
totalPagesVariable	Will be replaced with total pages number	String	'{{total_pages}}'
page	It can be used to customize page number label	String	null
first	Text label for the 'First' button	String	'First'
prev	Label for the 'Previous' button	String	'Previous'
next	Label for the 'Next' button	String	'Next'
last	Label for the 'Last' button	String	'Last'
loop	Carousel-style pagination	Bool	false
onPageClick	Callback on click event	Function	null
paginationClass	The root style for pagination component	String	'pagination'
nextClass	CSS class(es) for the 'Next' button	String	'page-item next'
prevClass	Class(es) for the 'Previous' button	String	'page-item prev'
lastClass	Class(es) for the 'Last' button	String	'page-item last'
firstClass	Class(es) for the 'First' button	String	'page-item first'
pageClass	Class(es) for the page buttons	String	'page-item'
activeClass	Class(es) for active button	String	'active'
disabledClass	Class(es) for the disabled button(s)	String	'disabled'
anchorClass	CSS class(es) for anchors inside buttons	String	'page-link'