简单实用且功能齐全的jQuery分页插件

当前位置:主页 > jQuery库 > 菜单和导航 > 简单实用且功能齐全的jQuery分页插件
简单实用且功能齐全的jQuery分页插件
分享:

    插件介绍

    Pagination.js是一款简单实用且功能齐全的jQuery分页插件。该jQuery分页插件提供多种数据源方式,众多的配置参数,回调函数,显示控制等,还提供了5套内置的分页条皮肤。

    浏览器兼容性

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

Pagination.js是一款简单实用且功能齐全的jQuery分页插件。该jQuery分页插件提供多种数据源方式,众多的配置参数,回调函数,显示控制等,还提供了5套内置的分页条皮肤。

使用方法

数据源

数据源是最终提供给分页组件的是一个数组。Pagination.js支持4最后数据源格式:

dataSource array | string | object | function                
              

1、数组格式:直接提供一个数组,例如:

['1', '2', '3', '4']                
              

2、Object:提供一个对象,里面要包含数组,可以通过locator: 'data'指定这个数组

{
    data: ['1', '2', '3', '4']
}                 
              

3、Function:提供一个自定义函数,根据自己的业务逻辑返回数组,自定义程度很高,可以实现上面2种方式可以动态组装数据,使用done返回数据,如:

dataSource: function(done){
    var result = [];

    for(var i = 1; i < 196; i++){
        result.push(i);
    }

    done(result);
}                
              

也可以发送请求获取数据,使用done异步返回数据。

dataSource: function(done){
    $.ajax({
        type: 'GET',
        url: '/test.json',
        success: function(response){
            done(response);
        }
    });
}                
              

4、URL:提供一个URL,通过Ajax返回数据,适用于异步分页,每次请求返回一页的数据,返回的数据也可以通过locator查找。

如果URL为file、http或https协议,会用jsonp发送请求,否则为Ajax。

/test.json                
              

每次分页发起请求时,会附加两个参数pageNumberpageSize,也可使用alias来指定参数名。

/test.json?pageNumber=2&pageSize=10                
              

配置参数

  • locator string | function:这个参数与dataSource相关,一般情况下,dataSource是一个数组,可以直接传给分页组件处理。但如果返回的是Object,那么就需要指定那个数组,默认为data。指定locator可定位到数据源的位置,支持2种方式:

    1、String

    {
        data: ['1', '2', '3', '4']
    }
    

    指定locator: 'data'之后,最终传给分页组件的就是['1', '2', '3', '4']。此外,还支持多层定位,如果dataSource是下面代码的样子,则可用locator: 'a.b'

    {
        a: {b: ['1', '2', '3', '4']}
    }
    

    2、Function:提供一个自定义函数,找到数组的位置,并返回。

    locator: function(){
        // find data and return
        return 'a.b';
    }
    

    通过Ajax获取的数据同样会应用此规则。

  • totalNumber:类型:number,默认值:1。条目总数,异步分页时必填,模拟分页时为数组的长度
  • pageNumber :类型:number,默认值:1。指定初始化时加载哪一页的数据
  • pageSize:类型:number,默认值:10。每页的条目数
  • pageRange:类型:number,默认值:2。可见的页码范围,即当前页码两边的页码数量。比如当前是第 6 页,设置 pageRange 为2,则页码条显示为'1...4 5 6 7 8'
  • callback function(data, pagination):每次翻页时的回调,callback会传入两个参数:
    callback: function(data, pagination){ ... }  
    
    参数 类型 描述
    data array 当页数据
    pagination object 包含当页配置信息的对象

    pagination对象包含以下属性值:

    参数 类型 描述
    pageNumber number 当前页码
    pageRange number 页码范围
    pageSize number 每页条目数
    totalPage number 总页数
    totalNumber number 总条目数
    el jQueryObject 分页实例的容器
    direction number 分页方向,往前翻页时值为-1,往后翻为1,初始化时为0
  • alias :类型:Object。请求的参数别名,用于异步分页,默认为空。例如:
    alias: {
        pageNumber: 'pageNum',
        pageSize: 'limit'
    }  
    

    那么通过Ajax发起请求时,会替换默认的pageNumber和pageSize。

    /test.json?pageNum=2&limit=10 
显示控制
参数 类型 默认值 描述
showPrevious boolean true 是否显示 '上一页'
showNext boolean true 是否显示 '下一页'
showPageNumbers boolean true 是否显示 '页码'
showNavigator boolean false 是否显示导航器
showGoInput boolean false 是否显示跳转输入框
showGoButton boolean false 是否显示跳转按钮
showFirstOnEllipsisShow boolean true 是否在有省略号时显示开始页码
showBeginingOnOmit: false,
pageRange: 1,
totalNumber: 100,
pageSize: 10
像上面这样设置,分页会显示为:分页条会显示成这样 '... 4 5 6 ... 10'
showLastOnEllipsisShow boolean true 是否在有省略号时显示结束页码
showEndingOnOmit: false,
pageRange: 1,
totalNumber: 100,
pageSize: 10
像上面这样设置,分页会显示为:分页条会显示成这样 '1 ... 4 5 6 ...'
autoHidePrevious boolean false 是否在当前显示为第一页时隐藏 '上一页' 按钮
autoHideNext boolean false 是否在当前显示为最后一页时隐藏 '下一页' 按钮
分页样式
参数 类型 默认值 描述
classPrefix string 'pagination' 样式前缀
className string '' 附加给分页容器的额外样式类
activeClassName string 'active' 选中页码的样式类
disableClassName string 'disabled' 不可用页码的样式类
ulClassName string '' 附加给分页容器下的 'ul' 元素的样式类
定制样式
参数 类型 默认值 描述
prevText string «,即符号« '上一页' 的文本
nextText string »,即符号» '下一页' 的文本
ellipsisText string '...' 省略号文本
goButtonText string 'Go' 跳转按钮文本
formatNavigator string | function <%= currentPage %> / <%= totalPage %>,也可提供一个自定义函数,返回一个这样的字符串 导航器格式化模板。提供 3 个模板变量:
currentPage:当前页码
totalPage:总页数
totalNumber:总条目数
formatGoInput string | function <%= input %> 跳转输入框格式化模板,默认为 <%= input %>,也可提供一个自定义函数,返回一个这样的字符串。
<%= input %> 相当于 <input type="text" class="J-paginationjs-go-pagenumber"> 的一个包装,所以,也可自定义一个输入框标签元素,只需要确保带有 J-paginationjs-go-pagenumber 这个class即可。提供 4 个模板变量:
input:输入框
currentPage:当前页码
totalPage:总页数
totalNumber:总条目数
formatGoButton string | function <%= button %> 跳转按钮格式化模板,默认为 <%= button %>,也可提供一个自定义函数,返回一个这样的字符串。<%= button %> 相当于 <input type="button" class="J-paginationjs-go-button">,所以,也可自定义一个跳转按钮的标签元素,只需要确保带有 J-paginationjs-go-button 这个class即可。提供 4 个模板变量:
button:按钮
currentPage:当前页码
totalPage:总页数
totalNumber:总条目数
header string | function null 自定义头部内容。提供 3 个模板变量:
currentPage:当前页码
totalPage:总页数
totalNumber:总条目数
footer string | function null 自定义尾部内容。提供 3 个模板变量:
currentPage:当前页码
totalPage:总页数
totalNumber:总条目数
pageLink string null 分页的链接

方法

分页初始化之后,可以使用下面列出的方法来改变分页的行为。

var container = $('#example1');
container.pagination({ ... });

container.pagination('previous');                
              
  • previous:触发上一页。
  • next:触发下一页。
  • go:跳转到指定页,有以下 2 种使用方式。
    container.pagination('go', 8)
    container.pagination(8)
    

    也支持自定义回调函数,例如:

    container.pagination('go', 8, function(data, pagination){
        // template method of yourself
    })
    

    注意,设置自定义函数后,就不会再调用分页的回调函数callback了。

  • disable:禁用分页,执行后分页不可用,要重新恢复可用需要调用解锁事件container.pagination('enable')。每次异步翻页发出请求前,会自动调用此方法,请求成功之后会自动调用enable解锁。
  • enable:解锁分页,执行后分页恢复可用。
  • show:显示分页。
  • hide:隐藏分页。
  • destroy:销毁分页实例。
  • getSelectedPageNum:number,获取当前页码。
  • getTotalPage:number,获取总页数。
  • getSelectedPageData:array,获取当前页码的数据。
  • isDisabled:function,当前是否正处在禁用状态。

事件

分页事件的功能接口有 2 种使用方式,分别是回调函数和插件钩子。

使用回调函数:

var container = $('#example1');
container.pagination({
    afterRender: function(){
        // function body
    }
});               
              

使用插件钩子:

var container = $('#example2');

container.pagination({
    dataSource: [1, 2, 3],
    pageSize: 1
});

container.addHook('afterRender', function(){
    // function body
});             
              

注意,钩子可以在分页初始化之前定义,也可以在初始化之后定义。

  • beforeInit:分页实例初始化之前调用,返回false将阻止初始化。
  • beforeRender:每次分页时会重新渲染分页条,渲染之前调用。
  • beforePaging:分页之前调用。
  • beforeDestroy:分页实例销毁之前调用。
  • beforeDisable:禁用之前调用。
  • beforeEnable:解锁之前调用。
  • beforePreviousOnClick:点击上一页之前调用。
  • beforePageOnClick:点击页码之前调用。
  • beforeNextOnClick:点击下一页之前调用。
  • beforeGoInputOnEnter:分页输入框回车之前调用。
  • beforeGoButtonOnClick:分页跳转按钮点击之前调用。
  • afterInit:分页实例初始化创建完成之后调用。
  • afterRender:每次分页时会重新渲染分页条,渲染之后调用。
  • afterPaging:分页之后调用。
  • afterDestroy:分页实例销毁之后调用。
  • afterDisable:禁用之后调用。
  • afterEnable:解锁之后调用。
  • afterPreviousOnClick:点击上一页之后调用。
  • afterPageOnClick:点击页码之后调用。
  • afterNextOnClick:点击下一页之后调用。
  • afterGoInputOnEnter:分页输入框回车之后调用。
  • afterGoButtonOnClick:分页跳转按钮点击之后调用。
  • afterIsFirstPage:当前是第一页时调用。
  • afterIsLastPage:当前是最后一页时调用。

皮肤

分页组件自带了 5 套默认皮肤,但你完全可以定制你自己的皮肤。

例如蓝色皮肤,可以这样使用:

className: 'paginationjs-theme-blue'                
              

小号蓝色皮肤:

className: 'paginationjs-theme-blue paginationjs-small'                
              

大号蓝色皮肤:

className: 'paginationjs-theme-blue paginationjs-big'              
              

如果需要自定义样式,则可以增加CSS类custom-paginationjs

配置默认值

Pagination.js分页可通过$.fn.pagination.defaults对象来修改默认配置,修改后,将影响所有之后创建的实例。例如:

$.extend($.fn.pagination.defaults, {
    pageSize: 20
})                
              

之后所有新建的分页实例,每页条数都是20。

Pagination.js插件的github地址是:https://github.com/superRaytin/paginationjs