jQuery Pagination Ajax分页插件中文详解

一、相关demo

二、简介与说明

  • 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。
  • 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持text-align的定位。
  • 对原js文件注释进行了中文翻译,demo页面也是汉化了的,demo页面的js与原demo有一些出入,但核心不变。

三、使用方法

跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是pagination,例如$("#page").pagination(100);,这里的100参数是必须的,表示显示项目的总个数,这是最简单的使用,得到的显示如下:
分页效果图 张鑫旭-鑫空间-鑫生活

还有一点值得一提的是分页列表需要放在class类为pagination的标签内,您可以使用text-align属性控制分页居中显示还是居右显示。

回调函数一般用来装载对应分页显示的内容,具体参见demo源文件。

四、参数

参数名 描述 参数值
maxentries 总条目数 必选参数,整数
items_per_page 每页显示的条目数 可选参数,默认是10
num_display_entries 连续分页主体部分显示的分页条目数 可选参数,默认是10
current_page 当前选中的页面 可选参数,默认是0,表示第1页
num_edge_entries 两侧显示的首尾分页的条目数 可选参数,默认是0
link_to 分页的链接 字符串,可选参数,默认是"#"
prev_text “前一页”分页按钮上显示的文字 字符串参数,可选,默认是"Prev"
next_text “下一页”分页按钮上显示的文字 字符串参数,可选,默认是"Next"
ellipse_text 省略的页数用什么文字表示 可选字符串参数,默认是"…"
prev_show_always 是否显示“前一页”分页按钮 布尔型,可选参数,默认为true,即显示“前一页”按钮
next_show_always 是否显示“下一页”分页按钮 布尔型,可选参数,默认为true,即显示“下一页”按钮
callback 回调函数 默认无执行效果

五、使用举例

例如下面的使用代码:

$("#Pagination").pagination(56, {
    num_edge_entries: 2,
    num_display_entries: 4,
    callback: pageselectCallback,
    items_per_page:1
});

这段代码表示的含义是:总共有56(maxentries)个列表项,首尾两侧分页显示2(num_edge_entries)个,连续分页主体数目显示4(num_display_entries)个,回调函数为pageselectCallback(callback),每页显示的列表项为1(items_per_page)。您可以对照参数表修改配置这里的参数。

六、关于demo的一些说明

总共有三个demo,第一个demo就是个静态的数据,直接写在HTML上;第二个使用Ajax加载HTML数据,然后进行分页显示;第三个demo可以动态修改一些参数观察对应的分页效果。

所有demo页面的js注释我都改为了中文标注,难点在于回调函数,demo中回调函数有两个参数,一个是page_index,另一个是jq,前一个表示您当前点击的那个分页的页数索引值,后一个参数表示装载容器。这里的页数索引值是关键,我们要根据这个索引值找到对应的(例如)HTML元素,然后再指定的容器中显示出来,demo中提供了装载单元素以及多元素的方法,相信不会有太大问题。
一些参数 张鑫旭-鑫空间-鑫生活

好吧,就这些!

如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=616

(本篇完)

分享到:

标签: , , , , , , ,

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×
想找个师兄入门前端?不妨 ×


发表评论(目前57 条评论)

  1. 有跳转的时候回调无效说道:

    点击页码,上一页和下一页 回调函数都可以被执行,但是如果有跳转 回调是不能被执行的,请问如何解决?我先试试 ,大神是否有想法?谢谢啦

  2. LSMN说道:

    最近一直困扰长文章(长文本)无刷新分页。能否给点思路呢?

  3. zl说道:

    ajax分页页数变化问题怎么处理

  4. 新人说道:

    最近用了一款 BOOTSTRAP ace的一款框架 也是基于Pagination 封装好的分页 我在使用的时候发现表格的列数 不能超过6列 超过了 分页以及其他JS 功能都失效了 查了好多资料 也不知道为什么 请问这个列数可以在什么地方设置吗

  5. DrLouie说道:

    第一个demo,设置分页显示两个项目,同样只显示一个

  6. yuanfang说道:

    有个致命的缺陷,有待改进。
    如果我在查询第一页结果时,进行初始化:
    if(pageNum == 1)
    initPagination();
    那么会导致死循环,因为initPagination()初始化完之后,会回调,而回调函数又去查询第一页。所以会导致死循环。目前我的处理是,加入一个flag,来避免:
    pageSelectCallback : function (page_index, jq){
    var pageNum = page_index + 1;
    alert(“pageSelectCallback–” + pageNum);
    if(pageNum == 1 && first_flag){ // 阻止死循环
    first_flag = false;
    }else{
    if(pageNum == 1)
    first_flag = true; // 阻止死循环
    queryStudentInfo(pageNum);
    }
    return false;
    }

    第二种办法:
    var init_flag = false; // 是否初始化分页的分页的flag
    if(pageNum == 1 && !init_flag){ // 查询第一也是进行初始化
    ems.student.initPagination();
    }

    回调的写法:
    function pageSelectCallback(page_index, jq){
    if(pageNum == 1 && !init_flag){ // 查询第一页并进行分页初始化时,不去服务器再次查询
    init_flag = true;
    }else{
    queryStudentInfo(pageNum);
    }
    return false;
    }
    这样做的原理是:第一次查询第一页时,进行分页初始化,而初始化会去回调,而回调又去查第一页。那么需要加个flag,来标志分页已经初始化了,并且在第一次查询第一页,进行分页初始化时,此时的回调我们应该跳过,因为已经查询过了。

  7. xiao刘说道:

    张老师,您的第二个 demo 我设置显示每页两条数据,为什么还是1条啊?麻烦说一下

  8. ayun说道:

    jQuery Pagination Ajax分页插件 的 使用问题, 如果我在页面中放了2个这个插件,
    list头部一个,list底部一个, 在点击其中一个分页控件的时候,怎么让另外一个分页控件的当前页码同步?

  9. 姜半夏说道:

    请教一下,在demo_ajax例子中,为什么修改items_per_page: 2时,每页显示的仍然只有一行数据呢?

  10. taishanrou说道:

    初始化的时候,就需要maxentries这个参数,这个我感觉有待优化,能加到回调中就更好了。
    目前前台无法自定义每页条数的控制,我修改了一下,加了个下拉列表,而且也没有直接跳转页数。

  11. zuidaima说道:

    学习了,另外可以参考下最代码网站上的分页代码:
    http://www.zuidaima.com/share/search.htm?key=%E5%88%86%E9%A1%B5

  12. 小白说道:

    有没有思路解析或者代码详解,想学习一下

  13. 不会用说道:

    不会用,有会的可以联系我。235546373。求教。

  14. DDDD说道:

    callback 返回 return false或是true都可以继续单击!
    我在加载页面的时候无法再未加载完成前禁止点击别的分页!

  15. Copterfly说道:

    多谢楼主的详细介绍,这个JQ分页插件确实好用。num_display_entries 是奇数的时候页码个数不正确的bug在新版本v2.2中已经解决。完全可以改为不需要一次性加载全部数据,可以每点击一次页码用ajax取当前页需要显示的数据,方法是:在页面加载时后端count一次总记录数作为maxentries,然后用page_index去数据库取就行了。

    • dzb3688说道:

      聪明!
      不用一次性加载,点击分页ajax就ok了。

      $.getJSON(‘createUrl(‘timing/page’)?>’,{“current”:page_index},function(data){
      $(‘#Searchresult’).empty().append(data); // //装载对应分页的内容
      });

  16. caotian说道:

    为什么current_page要从0开始,即使是程序员,分页时第一页也应该从1开始吧

  17. zyc说道:

    谢谢分享

  18. hen说道:

    帮我解决了分页问题,给你个赞

  19. Troland说道:

    我得说这个插件有些问题……比如demo中如果输入的num_display_entries为3或者2的时候。这个从1开始点当到3的时候后面怎么不开始显呢?奇怪。

  20. Troland说道:

    当初也用了这个插件可是发现有些问题呀。 pageselectCallback有问题的。

  21. tiger说道:

    接上面,而且发现在pageselectCallback这个函数,好象没用过 jq这个参数,这是为什么?

  22. tiger说道:

    本人菜鸟,对于第一个demo有点看不懂,虽然运行是正常的。在调用 pageselectCallback 函数,并没有使用任何参数,但在定义 pageselectCallback函数时,是有这2个参数, function pageselectCallback(page_index, jq),我就不懂了,这2个参数是如何传递过去的,望博主答疑。

  23. sfs说道:

    为什么 我一用就出了个 死循环!

  24. zwell说道:

    你的第二个Ajax的demo里,,为什么修改items_per_page没用,还是只显示一条,但是分页变了

  25. 郑州网建说道:

    嗯 写的挺好的。

  26. .net说道:

    本人用此分页试验过30万条数据 一点问题没有,看到有有楼说的1万条数据就有问题,不知道有没有试验过,研究过改该控件的人应该知道 这个使用的存储过程是按需取数据 何来显示慢。。。。。无语

  27. 看看说道:

    gideon 说:
    2011年01月28日于23:10
    挺好的,只是这样的分页没有什么意义,因为你把所有的数据都提出来了,然后在进行分页。 如果我有个产品页面,如果我有1万多的产品,那么你的这个分页就会把服务器给搞垮了,哈哈,所以分页不结合数据库语言(如php)来实现的话,没有太大的用处!

    这分页把所有数据都提出来了?你没有写过代码吧!

  28. Kevin说道:

    楼主好,请问在Prev前面怎么加一个’首页’链接 功能与点击’1’相同。请指教。。

  29. 178079013说道:

    我还是看不懂啊!一般都是从数据库提取!怎么传递当前页到服务器啊?

  30. Konata9说道:

    我觉得博主的解释已经很好了,给了我很大的帮助。

    看了觉得还不清楚的就应该自己再动手试试,程序最关键的还是要自己动手,这样才能加深理解。

  31. Leoric说道:

    如果这个改成每一次翻页callback就比较好了!

  32. qlj说道:

    问下..
    如果第一次初始化的时候不加载 如何做?
    翻页才是AJAX..

  33. 三告习习说道:

    num_display_entries 是基数的时候不正确哦

    function getInterval() {
    。。。。
    // 加入一个调节器可以修正
    var delta = opts.num_display_entries % 2 == 0 ? 0 : 1;
    var start = current_page > ne_half ? Math.max(Math.min(current_page – ne_half + delta, upper_limit), 0) : 0;
    。。。。

    }

  34. nassri说道:

    1.此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用
    此方法,因为加载会比较慢。

    这句话说的有问题,误倒了8楼

    这个分页不会一次全load所有记录

  35. lixiphp说道:

    这个详解不咋的啊。。。

  36. liujin834说道:

    谢谢楼主!非常感谢!膜拜!

  37. 游客说道:

    哇哦,,又遇到个 好站 ,先收藏了

  38. gideon说道:

    挺好的,只是这样的分页没有什么意义,因为你把所有的数据都提出来了,然后在进行分页。 如果我有个产品页面,如果我有1万多的产品,那么你的这个分页就会把服务器给搞垮了,哈哈,所以分页不结合数据库语言(如php)来实现的话,没有太大的用处!

  39. 小吴说道:

    可以把你的demo源码发我一份吗?谢谢,感觉你写的挺好的。可以发我邮箱吗?谢谢啦!

  40. Mr.L说道:

    //PHP
    $action = isset($_GET[“action”]) ? $_GET[“action”] : “”;
    $page = isset($_GET[“page”]) ? intval($_GET[“page”]) : 1;

    $sql = “select * from err_list “;
    $pagesize = 2;

    $totalCount = sqlCount($sql);
    $pageCount = ceil($totalCount/$pagesize);
    $limit=” limit “.($page – 1) * $pagesize.” , “.$pagesize;

    if($action == “loadPageCount”){
    jsonError(“succ”,$pageCount);
    exit();
    }

    if($action == “loadCommList”){

    $rs = sqlArray($sql.$limit);
    jsonError(“succ”,$rs);
    exit();
    }

    —————————————————————

    //JS

    $(function(){
    //此demo通过Ajax加载分页元素
    //var json;
    var initPager = function(json) {
    var num_entries = json.msg;
    //alert(json.msg.length)
    // 创建分页
    $(“#pager”).pagination(num_entries, {
    num_edge_entries: 1, //边缘页数
    num_display_entries: 4, //主体页数
    callback: pageClick,
    items_per_page: 2, //每页显示1项
    prev_text: “上一页”,
    next_text: “下一页”
    });
    };

    var pageClick = function(page_index, jq){
    //InsertHtml(page_index,$(“#comment”))
    //alert(json)
    //$(“#comment”).html(json.msg[page_index][“id”])
    $.getJSON(“page.php”,{action:”loadCommList”,page:page_index+1},function(json){
    if(json == null){alert(‘null’); return false;}
    if(json.state == “fail”){alert(‘fail: ‘+json.msg); return false;}
    if(json.state == “succ”){
    var html = “”;
    $.each(json.msg,function(i){
    //在这里搞点东西就可以
    html += “err_id: “+json.msg[i][‘err_id’];

    })//each
    $(“#comment”).html(html);
    }
    })
    return false;
    }
    //ajax加载
    //$(“#hiddenresult”).load(“?key=ddd”, null, initPager);

    function loadComm(){
    $.getJSON(“”,{action:’loadPageCount’},function(json){
    //json = json;
    if(json == null){alert(‘null’); return false;}
    if(json.state == “fail”){alert(‘fail: ‘+json.msg); return false;}
    if(json.state == “succ”){
    initPager(json);
    }
    })//ajax json
    }
    loadComm();
    });

    //HTML

    分页初始化完成后这里的内容会被替换。

  41. dsf说道:

    这就是文档?

  42. 老杨说道:

    不管是否是详解,有帮助吧,顶楼主下,收藏了.

  43. riqo说道:

    请教版主个问题:

    如果我要对一个json文件进行分页该如何写这个分页?
    我用了getJson的方法

    也就是说 数据不是直接load进来的

  44. 没技术含量说道:

    我问你啊,如果一个页面有两个分页,你该怎么办呢?你会吗?

    详解 在你眼里就是 含糊。

  45. 爱说实话的人说道:

    不要随随便便写点什么就叫详解
    很多现实问题你都没有解释清楚
    如果做不到面面俱到,就少加那些让人误解的标题!