表单/表格

Paginathing 前台分页jQuery插件

阿里云


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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <script src="path/to/jquery.min.js"></script>
  2. <script src="path/to/paginathing.js.js"></script>

HTML 结构

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

  1. <div class="panel panel-primary">
  2.   <div class="panel-heading">
  3.     <h3 class="panel-title">List of item.</h3>
  4.   </div>
  5.   <ul class="list-group">
  6.     <li class="list-group-item"> Your Item 1</li>
  7.     <li class="list-group-item"> Your Item 2</li>
  8.     <li class="list-group-item"> Your Item 3</li>
  9.     <li class="list-group-item"> Your Item 4</li>
  10.     <li class="list-group-item"> Your Item 5</li>
  11.     <li class="list-group-item"> Your Item 6</li>
  12.   </ul>
  13. </div>

初始化插件

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

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

配置参数

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

  1. perPage: 10, // show item per page
  2. limitPagination: false, // false or number. Limiting your pagination number.
  3. prevNext: true, // enable previous and next button
  4. firstLast: true, // enable first and last button
  5. prevText: '«', // Previous button text
  6. nextText: '»', // Next button text
  7. firstText: 'First', // "First button" text
  8. lastText: 'Last', // "Last button" text
  9. containerClass: 'pagination-container', // extend default container class
  10. ulClass: 'pagination', // extend default ul class
  11. liClass: 'page', // extend li class
  12. activeClass: 'active', // active link class
  13. disabledClass: 'disable' // disabled link class,
  14. insertAfter: null //class or id (eg: .element or #element). append the paginator after certain element
  15. 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
Github 地址:https://github.com/alfrcr/paginathing

Paginathing 前台分页 jQuery 插件

已有 537 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!