前台分页html,简单的jquery前台分页插件paginathing.js

Paginathing.js是一款简单的jquery前台分页插件。该jquery分页插件可以对页面中的列表和表格数据进行分页。它使用简单，兼容ie8，兼容Bootstrap框架。

使用方法

在页面中引入jquery和paginathing.js文件。

HTML结构

以列表为例，假设页面中有如下的一个无序列表，它的HTML结构如下：

List of item.

• Your Item 1
• Your Item 2
• Your Item 3
• Your Item 4
• Your Item 5
• Your Item 6

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jquery分页插件。对无序列表进行分页，每页显示2条记录。

jQuery(document).ready(function($){

$('.list-group').paginathing({

perPage: 2,

containerClass: 'panel'

})

});

配置参数

Paginathing.js jquery前台分页插件的可用配置参数如下：

perPage: 10, // show item per page

limitPagination: false, // false or number. Limiting your pagination number.

prevNext: true, // enable previous and next button

firstLast: true, // enable first and last button

prevText: '«', // Previous button text

nextText: '»', // Next button text

firstText: 'First', // "First button" text

lastText: 'Last', // "Last button" text

containerClass: 'pagination-container', // extend default container class

ulClass: 'pagination', // extend default ul class

liClass: 'page', // extend li class

activeClass: 'active', // active link class

disabledClass: 'disable' // disabled link class,

insertAfter: null //class or id (eg: .element or #element). append the paginator after certain element

pageNumbers: false // showing current page number of total pages number, to work properly limitPagination must be true

perPage：每页显示的记录数。

limitPagination：可以是false或一个数值。用于限制分页的页码。

prevNext：是否允许显示前一页按钮。

firstLast：是否允许显示第一页和最后一页按钮。

prevText：前一页按钮上显示的文字。

nextText：下一页按钮上显示的文字。

firstText：第一页按钮上显示的文字。

lastText：最后一页按钮上显示的文字。

containerClass：容器的class名称。

ulClass：ul元素的class名称。

liClass：li元素的class名称。

activeClass：当前分页按钮的class名称。

disabledClass：被禁用的分页按钮的class名称。

insertAfter：键分页传入到指定的元素之后，可以是null，或一个class名称，或一个id。

pageNumbers：显示总页数，limitPagination参数必须设置为true。

Paginathing.js jquery前台分页插件的github地址为：https://github.com/alfrcr/paginathing