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

当前位置:主页 > jQuery库 > 表单 > 简单的jquery前台分页插件paginathing.js
简单的jquery前台分页插件paginathing.js
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-02-02
    阅读:
简要教程

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

使用方法

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

<script src="path/to/jquery.min.js"></script>
<script src="path/to/paginathing.js.js"></script>
                
HTML结构

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

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">List of item.</h3>
  </div>
  <ul class="list-group">
    <li class="list-group-item"> Your Item 1</li>
    <li class="list-group-item"> Your Item 2</li>
    <li class="list-group-item"> Your Item 3</li>
    <li class="list-group-item"> Your Item 4</li>
    <li class="list-group-item"> Your Item 5</li>
    <li class="list-group-item"> Your Item 6</li>
  </ul>
</div>   
                
初始化插件

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

<script type="text/javascript">
  jQuery(document).ready(function($){
    $('.list-group').paginathing({
          perPage: 2,
          containerClass: 'panel'
    })
  });
</script>
                

配置参数

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

网友评论