jQueryPaging分页数据获取插件

所属分类:导航-分页

 32091  306  查看评论 (16)
分享到微信朋友圈
X
jQueryPaging分页数据获取插件 ie兼容11

jQuery-Paging 

1. 在HTML文件中写入如下代码,再将相应的CSS/JS/Data文件引入即可

<div id="resultBox"></div>
  <div id="paging">
    <div class="first">First</div>
    <div class="prev">Prev</div>
    <ul class="list"></ul>
    <div class="go">
      <input type="text" placeholder="Goto">
      <button>GO</button>
    </div>
    <div class="next">Next</div>
    <div class="last">Last</div>
  </div>

2. Paging 的配置参数

$('#paging').paging({
    nowPage: 1, // 当前显示页
    allPages: Math.ceil(data.count / 6), // 所有页(由传入的数据决定)
    displayPage: 7,  // 分页列表显示的个数
    callBack: function (now) { // 回调函数,用于数据获取
      var currentPages = now * 6 < books.length ? 6 : books.length - (now - 1) * 6;
      $oResultBox.html('');
      for (var i = 0; i < currentPages; i++) {
        var num = (now - 1) * 6 + i;
        var create_dl = $('<dl></dl>');
        var _html = '<dt>'+
                      '<a href='+books[num].alt+' target="_blank"><img src='+books[num].image+'></a>'+
                    '</dt>'+
                    '<dd>'+
                      '<a href='+books[num].alt+' target="_blank" class="title">'+books[num].title+'</a>'+
                      '<p class="author">'+books[num].author+'</p>'+
                      '<p class="publisher">'+books[num].publisher+'</p>'+
                    '</dd>';

        create_dl.html(_html).addClass('bounceIn animated');
        $oResultBox.append(create_dl);
      }
    }
  });

3. 关于数据的获取使用

在这个页面中,数据的获取来源于豆瓣API,写的时候为了方便,我将其存到了个data.js文件中。如果你要改变数据的话,将数据放进去,然后包裹在一个data的变量中即可。

4. 插件的分页效果所支持:

    4-1) 首尾页/上下页/跳转页/列表页

    4-2) 自定义当前页面所显示的页数,默认是7页。(注: 页数最好大于3且是奇数,这样比较美观)

结尾:

1.  如果想要兼容到IE8的话,需要下载jQuery1.9x及以下的版本,IE8下分页效果就没有问题了,但是数据的获取那里还是有点问题。标准浏览器就全部没有问题。

2.  数据获取那里,以后我会更新成Ajax获取方式。

3.  数据来源于豆瓣API。

4.  有什么问题可以留言以及发邮件给我(1005526074@qq.com)

相关插件-分页

jQuery分页插件

根据获取内容显示不同页数并可输入页码跳转
  分页
 50818  475

bootstrap4的jquery分页插件

bootstrap4的jquery分页插件,支持刷新不变页数
  分页
 29713  250

基于Vue的分页插件pagination.js

基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.js
  分页
 50788  271

实用的分页插件zxf_page.js

基于jquery的分页插件
  分页
 38701  335

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

    : 0
    2019/1/12 14:50:19
    谁有发一个来分享哦,
    回复
    皓月 0
    2018/7/25 14:10:32
    我使用你的插件每次点击到13页的时候都会卡死,是什么原因呢
    回复
    ? 0
    2018/5/25 9:51:19
    想要怎么办?
        smallhappiness0
        2018/5/25 11:46:34
        emmm可以联系我
    回复
    发粪涂墙 0
    2018/4/1 21:55:23
    谁用这个做个的吗? 回复
    missing U 0
    2018/3/24 17:03:03
    很好,可以拿来用用
        一起躲过雨的屋檐。0
        2019/5/20 13:27:15
        有源码吗?
    回复
    我是一只女汉子 0
    2018/3/2 10:13:14
    如何重新渲染插件???
        ? 亲爱的、讨厌 ?0
        2018/3/21 13:52:12
        这个你后来怎么做的?
        ColaMan*0
        2018/10/26 14:45:48
        怎么重新渲染
    回复
    0
    2018/1/24 15:16:12
    ┵ Enzo. 0
    2018/1/19 16:22:25
    CRayFish07 0
    2017/12/8 2:34:43
    krystal 0
    2017/10/20 13:52:15
    想下载
        刻骨铭心0
        2017/11/16 20:48:09

        这个可以有

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复