好用的jQuery滑动分页插件

所属分类:导航-分页

 52195  340  查看评论 (59)
分享到微信朋友圈
X
好用的jQuery滑动分页插件 ie兼容9

使用方法

1. 在HTML中引入CSS,jQuery和本插件,样式可自定义

2. 在body中

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

3. 在script标签中        

$('#box').paging({
    initPageNo: 1, // 初始页码
    totalPages: 30, //总页数
    totalCount: '合计300条数据', // 条目总数
    slideSpeed: 600, // 缓动速度。单位毫秒 
    callback: function(page) { // 回调函数 
        console.log(page);
    }
})
相关插件-分页

bootstrap paginat分页优化

增加显示当前页码、总页数,输入页码跳转,并且插件中的英文提示和注释都翻译成了中文
  分页
 38363  330

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

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

jQuery分页插件适配PC端移动端

jQuery分页插件,适配PC端、移动端
  分页
 41604  303

超实用的angular.js无刷新分页完整案例

超实用的angular.js无刷新分页完整案例(需要放到服务器下运行!)
  分页
 37334  365

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

    ? ??。Smile° 0
    2021/4/22 11:16:35
    怎么跳转到某一页面
        西瓜0
        2021/4/22 11:34:46
        callback: function(page) { // 回调函数
           console.log(page);//这里写你跳转方法。例如window.location.href = "****?page=" + page;
        }
    回复
    我们的故事 0
    2020/2/7 12:47:06
    这个加载本地数据实在哪里写啊? 回复
    The Days 0
    2019/6/17 15:08:20
    ?? 0
    2018/12/22 11:33:27
    我点击下一页 然后整个box div 都变成display:none了
        ?花?而侦落1
        2019/1/9 17:33:04

        paging.js 代码56行

         liWidth = lis[0].offsetWidth

        有误,应该用

         liWidth = $(lis[0]).outerWidth()

        否则滚动效果不出现

    回复
    百分之二十。 0
    2018/11/7 20:18:04
    请问如果我在一个页面的三个div里都需要分页,如何在它在第二个页面里当前页面归1 回复
    闹够了没有 0
    2018/7/27 9:29:26
    在edge浏览器下分页为什么出现乱码
        西瓜0
        2018/7/27 9:51:02
        乱码一般都是编码问题,只要meta 标签加好utf-8即可解决
        <meta charset="utf-8">
    回复
    /sun太阳/sun 0
    2018/7/18 10:40:22
    请问关于callback回调我有一些问题,
    这个callback是加载完和点击页面就自动执行的,
    我怎么调用页码的点击事件。因为我点击了按钮后也要执行ajax请求,我不希望一加载完成就执行ajax请求
        资产规划小六0
        2018/7/23 10:55:58
        您的?铨解?了?,我?在也是呃??铨
        资产规划小六0
        2018/7/23 10:58:33
        您?铨解?了?,我?在也遇到呃??铨
    回复
    - 安″ 0
    2018/6/23 11:17:54
    动态滑动效果不显示
        闹够了没有0
        2018/7/2 11:13:22
        点击数字4以后的数字动态滑动效果才显示
    回复
    tpidcat 0
    2018/4/24 17:56:33

    点击页码事件,写在paging.js  handles() 中,在 

    'function handles(pageIndex) {'
       //下新增一行代码:
        getServiceData(pageIndex); //点击页码后续数据或其他操作
    
    //引用分页的html中js内新建函数 
    getServiceData():
    //点击页数加载数据填充到内容模块
    function getServiceData(page) {
        //alert(page);
        //ajax lod servicedata...
        //处理返回的数据填充到内容部分
    }
        tpidcat1
        2018/4/25 0:57:05

        额。还是要谢谢帮忙搞成代码块的小伙伴,想说明一下,其实行1和2是一行。。,应该是
        // 'function handles(pageIndex) {' 下新增一行代码:
        5和6行其实是一行注释。。。
        //引用分页的html中js内新建函数 getServiceData():

    回复
    tpidcat 1
    2018/4/24 17:24:14

    关于页数超过1666页,后续页数不显示的问题,我这边加了两行代码,不知道有没问题,贴出来大家看一下,如果没问题的话,希望作者给加到demo里去,谢谢。
    1.paging.js 30行下新增两行代码:

    ulLength = 100000;
    totalPages > 5 ? ulLength = totalPages * liWidth : ulLength = 5 * liWidth;//计算页码总宽度

    2.接下来还是当前js,找到content,拼接的html控件字符串里找到ul元素,style样式加个width属性:

    ;width:' + ulLength + 'px;

    一劳永逸,不用再去css里改ul的宽度了。原谅我不会用代码块,。。

        tpidcat0
        2018/4/25 0:53:50
        不知道谁帮忙弄的代码块,反正谢谢。发现变量ulLength好像没有用var声明,应该不影响代码使用。这里标注下
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复