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

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                
              

每次分页发起请求时，会附加两个参数pageNumber和pageSize，也可使用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 

显示控制

分页样式

定制样式

方法

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

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