素材8网-专注前端素材！
来源：https://www.sucai8.cn/38279.html

jQueryPaging分页数据获取插件

  • 891
  • 0
  • 0


基于jQuery的分页及数据获取插件
1. 在HTML文件中写入如下代码，再将相应的CSS/JS/Data文件引入即可
  1. <div id="resultBox"></div>
  2.   <div id="paging">
  3.     <div class="first">First</div>
  4.     <div class="prev">Prev</div>
  5.     <ul class="list"></ul>
  6.     <div class="go">
  7.       <input type="text" placeholder="Goto">
  8.       <button>GO</button>
  9.     </div>
  10.     <div class="next">Next</div>
  11.     <div class="last">Last</div>
  12.   </div>
复制代码
2. Paging 的配置参数
  1. $('#paging').paging({
  2.     nowPage: 1, // 当前显示页
  3.     allPages: Math.ceil(data.count / 6), // 所有页（由传入的数据决定）
  4.     displayPage: 7,  // 分页列表显示的个数
  5.     callBack: function (now) { // 回调函数，用于数据获取
  6.       var currentPages = now * 6 < books.length ? 6 : books.length - (now - 1) * 6;
  7.       $oResultBox.html('');
  8.       for (var i = 0; i < currentPages; i++) {
  9.         var num = (now - 1) * 6 + i;
  10.         var create_dl = $('<dl></dl>');
  11.         var _html = '<dt>'+
  12.                       '<a href='+books[num].alt+' target="_blank"><img src='+books[num].image+'></a>'+
  13.                     '</dt>'+
  14.                     '<dd>'+
  15.                       '<a href='+books[num].alt+' target="_blank" class="title">'+books[num].title+'</a>'+
  16.                       '<p class="author">'+books[num].author+'</p>'+
  17.                       '<p class="publisher">'+books[num].publisher+'</p>'+
  18.                     '</dd>';

  20.         create_dl.html(_html).addClass('bounceIn animated');
  21.         $oResultBox.append(create_dl);
  22.       }
  23.     }
  24.   });
复制代码

3. 关于数据的获取使用

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

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

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

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

结尾：

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

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

3.  数据来源于豆瓣API。
相关素材
jQueryPaging分页数据获取插件
  • 田野 刚刚下载了一个素材
  • Danielxu 刚刚下载了一个素材
  • 蓝蓝天空 刚刚下载了一个素材
  • Michael程 刚刚下载了一个素材
  • 朱先生 刚刚下载了一个素材
  • Hi2710 刚刚下载了一个素材
  • qqHzY1K 刚刚下载了一个素材
  • qqY82 刚刚下载了一个素材
  • qq耶嘿Soi 刚刚下载了一个素材
  • 肉圆子 刚刚下载了一个素材
  • 雁南飞 刚刚下载了一个素材
  • qqsummerVXz 刚刚下载了一个素材
  • bibubibu 刚刚下载了一个素材
  • 视觉 刚刚下载了一个素材
  • qq可乐seB 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题