jquery.pagination

基于jQuery开发的分页插件。可实现淘淘宝、京东等著名电商网站的分页效果。

安装

• 直接引入jquery.pagination.js || jquery.pagination.css。

• 通过 npm 安装 npm install jquery.pagination --save-dev。

  功能概述

  可实现PC端的分页效果，可自定义参数，提供回调接口和公共API接口，提供异步接口。

  快速上手

  HTML

  CSS

  根据分页插件提供的CSS钩子，所有命名都以.pg-*开头，样式和行为分离。样式可用默认样式，也可以通过引入CSS覆盖默认样式

  .pagination {

    .pg-common {};
    .pg-on {};
    .pg-jumpNum {};
    ...
  

  }

  JavaScript

  一行代码即可完成调用，超级简单。

  $('.pagination').pagination();

  文档

  参数

  jqery.pagination支持无参数的调用，每个参数都会有默认值，如果想实现自定义的功能，可以使用自定义参数。参数默认值如下：

  var defaults = { count: 2, // 出现省略号时的当前分页的前后分页个数 pageTotal: 8, // 分页总数 pageStart: 6, // 出现省略号时的起始分页码 prevCount: 2, // 出现省略号时的最前显示分页个数 commonCls: 'pg-common', // 分页共同样式钩子 currContentCls: 'pg-on', // 当前分页样式钩子 prevContent: '<', // 上一页文案 prevContentCls: 'pg-prev', // 上一页样式钩子 nextContent: '>', // 下一页文案 nextContentCls: 'pg-next', // 下一页样式钩子 totalContentCls: 'pg-totalWrapper', // 文字样式钩子 totalNumCls: 'pg-totalNum', // 总页数样式钩子 jumpToPageCls: 'pg-jumpWrapper', // 文字样式钩子 jumpNum: 'pg-jumpNum', // 输入框样式钩子 current: 1, // 当前页 jumpBtnContent: '确定', // 按钮文案 jumpBtnCls: 'pg-jumpBtn', // 按钮样式钩子 callback: function(obj) {}, // 回调函数，接收一个对象作为参数 render: function() {} // 异步接口，是否跨域请求取决于用户需要 };

callback方法

obj.getPageCount

获取当前的总分页数，即pageTotal，无参数。

obj.setPageCount

设置当前的总分页数，接收一个参数，即要设置的总分页数（pageTotal）

obj.getCurrent

获取当前分页，无参数

render方法（异步接口方法）

$('.pagination').pagination({
    render: function () {
        $.ajax({
            url: '../test.php',
            type: 'GET',
            //如果要传递分页数到服务器，按以下方式获取分页数
            data: $('input.pg-jumpNum').val() || $('span.pg-on').text(),
            success: function (val) {
                console.log(val);
            }
        })
    }
});