评论：jQuery仿淘宝分页插件(原创)  [查看原文]

上上谦0
2020/3/8 15:39:18
解决了吗

无忧无虑1
2020/3/13 10:43:59

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

$(obj).html("").page_ctr({..})

无忧无虑0
2020/3/13 10:38:04
分页插件是自动加载在容器后面的,如果内容不够一页是不会显示出来,其他定制化样式,另外写css覆盖就行

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方法

无忧无虑0
2019/6/28 8:54:09
可以，如果不用jQuery，要用原生js改造

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();
}

无忧无虑1
2019/2/28 8:30:43
是否找到两次请求的原因?像事件冒泡,页面刷新,重复调用......再有每次ajax调用前,你可能需要先清空分页容器的内容,如:$(obj).html('')

无忧无虑1
2019/2/12 10:51:06

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

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

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

无忧无虑1
2019/2/12 10:58:09
多尝试吧,要根据页码判断来展示数据,关键还是在change_content对象方法中编写业务逻辑

无忧无虑0
2018/12/18 18:41:06
在page.js里去掉追加的确认按钮元素,再为input添加失焦事件,然后把点击事件封装成失焦方法

楼主 请教个问题

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); //调用分页插件

total_item 如何用动态的数字  分页的总数从数据库读取 而不是写一个死数字

无忧无虑1
2018/12/6 12:26:16

把page_ctrl(obj)方法放在ajax请求回调中,如果是一次请求,从数据库获取条目总数然后赋值给total_item,再调用page_ctrl(obj)方法就可以了.
多次请求,需要在回调里先清空分页容器的内容(方法很多),比如

$(obj.obj_box).html('');

而后再调用


page_ctrl(obj);

或者修改toPage.js,把append()换成html();

?╂ 淡不掉、0
2019/7/16 15:56:45
我要怎么绑定上一页下一页到其他的标签呢

(づ ●─● )づ0
2020/2/28 17:16:03
想请问一下page_ctrl(obj);放在什么位置上，是封装html和json数据之后还是哪

无忧无虑0
2018/11/22 11:37:58
注册登录后:
1,保持每天签到,从第四天开始,每天获得一个jq币
2,通过发布代码或插件
3,评论别人的插件,解决提问者问题等
4,有钱能使鬼推磨,花钱买.

无忧无虑0
2018/11/14 8:41:45
不是不行,是做了判断,不足两页不加载组件,total_item小于per_num就一页,为什么还要分?

无忧无虑1
2018/11/14 8:42:52
你要想加载可以自己在page.js里去掉限制条件

champion_yo0
2018/11/21 13:04:26
page 分页插件ok?

改进建议：
1. 建议把 change_content() 单独提取出来使用，通用性较高

// fn 为自定义函数的函数名
// 在 fn 函数中可以使用 arguments[0] 获取当前页数（current_page）
function page_ctrl(data_obj,fn) {
        ......
       function change_content() {
           eval(fn+"("+current_page+");")；
       }
       ......
}

2. 关于自定义输入跳转页面非法数据问题（形如输入页码为：-1、大于总页数等数据）改进

// 在最后一个 else if
// 这是只是简单示范一下，更严格的数据校验还需根据需求完善
else if (that.hasClass('to_page_num')) {
    var pageNum = parseInt(that.siblings('.input_page_num').val());
    if (current_page >= 1 && current_page <= total_page) {
        current_page = pageNum;
    } else {
        current_page = 1;
    }
    that.parent('.page_ctrl').html('');
    page_even();
}

fox1
2018/10/26 9:56:59

sorry,打错了；第二点代码


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();
}

无忧无虑0
2018/10/29 16:13:32
不好意思,回复晚了几天.
首先,非常感谢您的反馈,看得出来您是研究过源码的.
关于页码的范围限制,发布的插件中的确没有做处理,这个我会找个时间更新一版,已经下载使用的,可以自行优化一下,难度不大.
关于插件中change_content()方法,它是加载数据的一种示例方法,即使完全删除,对插件本身都是没有影响的,实际使用时,是需要使用者根据具体项目各展神通的.事实上,该事件应该作为参数从外传入,而后调用,尤其是多处使用时.
最后,再次表示感谢!