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

jQuery仿淘宝分页插件(原创)

所属分类：导航-分页

 36019  352  查看评论 (44)
分享到微信朋友圈
X
jQuery仿淘宝分页插件(原创) ie兼容6
 查看演示  立即下载

更新时间：2018/11/8 下午2:44:43

更新说明：

1, 新增不合法页面值规避机制,输入页码小于1,会默认跳转到第1页,页码超过分页总数,默认跳转到最后一页;其他不合法字段,如文字等,都会跳转到第1页,具体逻辑,各位下载后可自行更改.

2, 分页内容的加载方法更改,改由调用时传入

3, 调用时需传递分页内容加载方法,如:

var obj = {
    obj_box: '.class/#id...', //翻页容器(css选择器均可)
    total_item: '自然数,必填', //条目总数
    per_num: '自然数,选填,默认10', //每页条目数
    current_page: '自然数,选填,默认1', //当前页
    change_content: function(per_num, current_page) {
        //内容加载方法,可参考示例
    }
};
page_ctrl(obj); //调用分页插件

发布时间:2018-9-12 8:34

插件使用(注意引入脚本路径)

举例说明:

1,html中引入分页样式文件

 <link rel="stylesheet" href="css/toPage.css">

2,指定分页容器()数量不限,不同容器中的分页互不影响)

<!--分页容器_1-->
<div ></div>
<!--分页容器_2-->
<div ></div>
......

3,引入必要js

<!--先引入jquery-->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!--再引入toPage.js-->
<script src="js/toPage.js"></script>

4,最后调用即可

 /*容器1参数*/
 var obj_1 = {
     obj_box: '.page_1', //翻页容器
     total_item: 72 //条目总数
     /*per_num:10,//每页条目数
     current_page:8//当前页*/
 };
 /*容器2参数*/
 var obj_2 = {
     obj_box: '.page_2', //翻页容器
     total_item: 372, //条目总数
     per_num: 20, //每页条目数
     current_page: 8 //当前页
 };
 /*调用分页方法,初始化数据*/
 page_ctrl(obj_1);
 page_ctrl(obj_2);
相关插件-分页
查看更多

超实用精简的分页插件

 精简实用的分页插件跨域调用的聚合的api分页逻辑简单易懂接口已经写好
  分页
 30840  296

jQuery分页插件bs_pagination

 bs_pagination是jQuery分页插件,基于Bootstrap。完全可配置的,响应网页设计。
  分页
 69710  426

jQuery分页插件jQuery.pager.js

 表格分页，li分页
  分页
 56483  337

刷新页面不变的分页插件

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

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

    (づ ●─● )づ 0
    2020/2/29 19:42:28
    怎么实现动态的修改数目总数 total_item: '自然数,必填', //条目总数
        上上谦0
        2020/3/8 15:39:18
        解决了吗
        无忧无虑1
        2020/3/13 10:43:59

        这个插件是一次性初始化的,一次性请求所有数据,然后前台分页显示,并非翻页一次请求一页数据.要实现动态请求的话,需要先清空容器再重新配置参数调用,比如:

        $(obj).html("").page_ctr({..})
    回复
    (づ ●─● )づ 0
    2020/2/27 16:40:03
    问一下楼主为什么我把你的demo引入后这就像个页面在我的menu的上面
        无忧无虑0
        2020/3/13 10:38:04
        分页插件是自动加载在容器后面的,如果内容不够一页是不会显示出来,其他定制化样式,另外写css覆盖就行
    回复
    25h 0
    2019/12/19 11:07:28
    var obj = {
  obj_box: '.class/#id...', //翻页容器(css选择器均可)
  total_item: '自然数,必填', //条目总数
  per_num: '自然数,选填,默认10', //每页条目数
  current_page: '自然数,选填,默认1', //当前页
  change_content: function(per_num, current_page) {
      //内容加载方法,可参考示例
  }
};
page_ctrl(obj); //调用分页插件

    请问楼主，如果数据返回的是总页数，而不是条目总数，该如何解？

        无忧无虑1
        2019/12/23 11:36:51
        如果返回的数据有总页数，应该是分步加载数据，每次请求当前页数据，而不是所有。不想花时间改源码的话，调用插件前可以先遍历数据计算下。须知道每页的显示条目数,固定不变的话，可以写死，有变动的话就需要后台返回给你。每页n条，条目总数就可以是n*总页数，即使最后一页不足n条，基本也不影响插件的准确性。当然了，最好是让后台返回总条目数给你。
        (づ ●─● )づ0
        2020/2/29 14:51:51
        大佬你的page_ctrl在哪加载的
        无忧无虑0
        2020/3/13 10:30:37
        整个toPage.js就是page_ctr方法
    回复
    Asher-GTR 0
    2019/6/26 14:41:53
    可以用在移动端吗？
        无忧无虑0
        2019/6/28 8:54:09
        可以，如果不用jQuery，要用原生js改造
    回复
    970603897 0
    2019/3/27 17:09:20
    else if (that.hasClass('to_page_num')) {
   var pageNum = parseInt(that.siblings('.input_page_num').val());
   if (pageNum >= 1 && pageNum <= total_page) {
       current_page = pageNum;
   } else {
       current_page = 1;
   }
   that.parent('.page_ctrl').html('');
   page_even();
}
    回复
    AnotherWay_0536 0
    2019/2/27 11:07:14
    求ajax生成的思路，我现在写的会请求两次服务器。
        无忧无虑1
        2019/2/28 8:30:43
        是否找到两次请求的原因?像事件冒泡,页面刷新,重复调用......再有每次ajax调用前,你可能需要先清空分页容器的内容,如:$(obj).html('')
    回复
    亲爱的-Jun 0
    2019/1/29 14:45:02
    待我签到几天，再来下载作者的作品~~ 回复
    明小月 0
    2019/1/29 11:19:01
    能给个ajax的例子吗，新手，求大神赐教，QQ邮箱1121294435@qq.com，异步加载 我写了没有实现异步加载 ，页面永远都是第一页的内容
        无忧无虑1
        2019/2/12 10:51:06

        新年好!今天开工才看到评论,我提供一下思路:把ajax异步加载的方法写进

        change_content:function(per_num,current_page){
   Ajax请求...
}

        这样只要页码改变,都会调用这个方法,从而发起请求.

    回复
    明小月 0
    2019/1/28 17:08:49
    为什么我ajax请求回调成功后然后循环的都是第一页的页面数据
        无忧无虑1
        2019/2/12 10:58:09
        多尝试吧,要根据页码判断来展示数据,关键还是在change_content对象方法中编写业务逻辑
    回复
    守熊~人 0
    2018/12/25 9:45:11
    可以的，配合ajax应该挺好用 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复