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

所属分类:导航-分页

 34975  351  查看评论 (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);
相关插件-分页

jQuery前端分页插件pageGroup.js

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

jQuery分页插件

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

jQueryPaging分页数据获取插件

基于jQuery的分页及数据获取插件
  分页
 37284  364

jQuery table分页插件

一款简单快速的前后端分页双套代码
  分页
 66623  464

讨论这个项目(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应该挺好用 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复