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

2022-01-20 17:19:52 浏览数 (1)

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

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

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

一、依赖

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

二、基础demo

  1. 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'

编程算法 es javascript css 网站建设

0 人点赞