UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery分页插件pagination.js

所属分类：导航-分页

 333892  687  查看评论 (351)
分享到微信朋友圈
X
jQuery分页插件pagination.js ie兼容6
 查看演示  website  立即下载

更新时间：2018/1/12 下午5:50:39

更新说明：增加固定按钮数量模式，具体请查看文档

更新时间：2017/9/21 上午10:06:18

更新说明：优化分页逻辑

更新时间：2017/3/27 上午9:22:41

更新说明：

更改了api参数，增加是否保持上下页按钮，为0时不显示分页

更新时间:2016-8-11

  1. 修复总数据为0时不显示分页。

  2. 修复总数据为1时显示默认总页数bug，改成不显示分页。

  3. 增加了this.setTotalPage(page);方法

简单使用方法

html

<div class="box"></div>

js

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

配置信息

pageCount：总页数（默认值：9）
totalData：数据总条数（默认值：0）
showData：每页展示条数（默认值：0）
current：当前第几页（默认值：1）
prevCls：上一页class样式（默认值：'prev'）
nextCls：下一页class样式（默认值：'next'）
prevContent：上一页节点内容（默认值：'<'）
nextContent：下一页节点内容（默认值：'>'）
activeCls：当前选中样式（默认值：'active'）
count：当前页前后页数（默认值：3）
coping：是否开启首页尾页（默认值：false）
homePage：首页节点内容（默认值：1）
endPage：尾页节点内容（默认值：当前最大页数）
callback()：回调函数
相关插件-分页
查看更多

实用美观的jquery 分页

 代码简单，运行速度快，兼容所有浏览器
  分页
 41001  453

jQuery前端分页插件pageGroup.js

 一款非常简洁漂亮方便调用的jQuery前端分页，没有多余的JS和文件，页面多可隐藏
  分页
 60180  376

一款非常简洁漂亮方便调用的jQuery前端分页

 一款非常简洁漂亮方便调用的jQuery前端分页，没有多余的JS和文件。
  分页
 95427  375

刷新页面不变的分页插件

 jQuery刷新页面页面不会改变的分页插件
  分页
 37444  321

讨论这个项目（351）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    123 0
    2019/9/5 17:28:00
    用thymeleaf语法 引进来用不了 不能用不显示
    回复
    不二出没 0
    2018/11/20 10:13:38
    当mode为固定的时候 页码跟count的值一样的时候会出现bug 假设页码4 count也是4 渲染出来页码会出现 0 1 2 3 4 5 出现bug
        永恒的爱0
        2019/3/12 9:39:42
        这个bug 解决了吗,我也遇到了这个问题
        Wangbo3200
        2019/3/15 10:56:59
        期待答案啊
    回复
    露露 0
    2018/11/12 17:18:45
    只有1页的显示样式，怎么处理的呢，只有孤零零的一个1 回复
    Evan昙花 0
    2018/11/5 17:52:04

    初始化分页， 为什么第一次不查询api？

    callback: function(api) {
    var data = {
        page: api.getCurrent(),
        name: 'mss',
        say: 'oh'
    };
    $.getJSON('*****/pagination#!method=get', data, function(json) {
        console.log(json);
    });
}
        不二出没1
        2018/11/20 10:15:37
        这是回调函数 只有当你页码发生变化的时候才触发
    回复
    ＆nbsp;? 0
    2018/10/30 15:42:49
    怎么把数据套进去啊，点击第几页然后显示第几页内容
        蓉猫儿0
        2018/11/24 12:00:15
        你解决了吗，我也想知道怎么套数据
        ??被鱼吃的猫cc0
        2018/12/7 16:08:48
        这插件没有请求后台的功能 totalData这个就是让后台吧所有数据传给你 然后分页不走接口 数据多 的会很卡吧 毕竟都是一次性加载
    回复
    守护 0
    2018/9/28 13:55:05
    这个只是分页的展示，怎么添加查询按钮，自己写了很多次，每次 请求的状态都是canceled , 到不了后台，且显示为： Provisional headers are shown 回复
    来自火星 0
    2018/9/1 19:22:46
    功能已经实现，样式好像用不上，咋回事 回复
    起风的季节 0
    2018/8/27 17:10:14
    不知道怎么加样式呢，求大神指点下，谢谢啦 回复
    vi2018 0
    2018/8/21 14:53:53
    设置pageCount，或者totalData和showData，可是页数总是10，没有效果。求指教啊，各位大佬
        笑往1
        2018/8/27 21:13:48

        setPageCount这里，需要初始化

        this.setPageCount = function(page) {
    opts.pageCount = page;
    this.init();
    return opts.pageCount = page;
};
    回复
    嘿！我有喉结！ 3
    2018/7/27 16:59:07

    修改了一下会出现0页或者会超出最大页数的方法。。

    /**
 * 获取总页数
 * 如果配置了总条数和每页显示条数，将会自动计算总页数并略过总页数配置，反之
 * @return {int} 总页数
 */
this.getPageCount = function() {
    var _pageCount = opts.totalData && opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
    if (_pageCount < opts.count)
        opts.count = _pageCount;
    return _pageCount;
};

    分页fix类型下

    var start = 1;
var end = pageCount;
var _count = 0;
if (opts.count % 2 == 0)
    _count = opts.count;
else
    _count = opts.count - 1;

var avgcount = _count / 2;
if (current <= avgcount) {
    start = 1;
    end = opts.count;
} else if (current + avgcount > pageCount) {
    start = pageCount - opts.count + 1;
    end = pageCount;
} else {
    if (opts.count % 2 == 0)
        start = current - avgcount + 1;
    else
        start = current - avgcount;
    end = current + avgcount;
}
        永恒的爱0
        2019/3/12 9:49:50
        感谢方法
        X-Man0
        2019/4/16 17:15:40
        厉害厉害，就等这个了，给100个赞
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复