jQuery Pagination Ajax分页插件中文详解

这篇文章发布于 2010年01月31日,星期日,01:43,归类于 jQuery相关。 阅读 475634 次, 今日 3 次 61 条评论

 

一、相关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中提供了装载单元素以及多元素的方法,相信不会有太大问题。
一些参数 张鑫旭-鑫空间-鑫生活

好吧,就这些!

七、更新与补充说明

本文很老了,而且我也只是翻译下,很多小伙伴询问使用中遇到的问题,精力有限加上不是自己写的,所以无能为力。

如果大家不嫌弃,可以试试我写的LuLu UI中的Pagination分页插件,可以独立使用,如下CSS和JS:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Pagination.css">
<script src="//qidian.gtimg.com/lulu/theme/peak/js/plugin/jquery.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Pagination.js"></script>
<script>
$('#testPage').pagination({
    length: 280
});
</script>

结果效果为:

文档参见:https://l-ui.com/content/apis/placeholder.html

以上~

(本篇完)

分享到:


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

  1. 前端菜鸟说道:

    分页页码前端是可以实现了,但是实现内容的切换,只显示一条。每页内容只显示一条啊

  2. jyd说道:

    學習了

  3. 解决第一个demo和第二个demo设置只显示一条的问题说道:

    function pageselectCallback(page_index, jq){
    $(“#Searchresult”).html(“”);//把清空元素放在回调一开始然后把append之前的移除给去掉
    for(var i=0;i<3;i++){
    var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone();
    //原来的empty去掉 $("#Searchresult").empty().append(new_content); //装载对应分页的内容
    $("#Searchresult").append(new_content); //装载对应分页的内容
    }

    return false;
    }

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

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

  5. LSMN说道:

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

  6. zl说道:

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

  7. 新人说道:

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

  8. DrLouie说道:

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

  9. 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,来标志分页已经初始化了,并且在第一次查询第一页,进行分页初始化时,此时的回调我们应该跳过,因为已经查询过了。

  10. xiao刘说道:

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

  11. ayun说道:

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

  12. 姜半夏说道:

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

  13. taishanrou说道:

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

  14. zuidaima说道:

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

  15. 小白说道:

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

  16. 不会用说道:

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

  17. DDDD说道:

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

  18. 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); // //装载对应分页的内容
      });

  19. caotian说道:

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

  20. zyc说道:

    谢谢分享

  21. hen说道:

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

  22. Troland说道:

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

  23. Troland说道:

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

  24. tiger说道:

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

  25. tiger说道:

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

  26. sfs说道:

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

  27. zwell说道:

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

  28. 郑州网建说道:

    嗯 写的挺好的。

  29. .net说道:

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

  30. 看看说道:

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

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

  31. Kevin说道:

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

  32. 178079013说道:

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

  33. Konata9说道:

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

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

  34. Leoric说道:

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

  35. qlj说道:

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

  36. 三告习习说道:

    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;
    。。。。

    }

  37. nassri说道:

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

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

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

  38. lixiphp说道:

    这个详解不咋的啊。。。

  39. liujin834说道:

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

  40. 游客说道:

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

  41. gideon说道:

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

  42. 小吴说道:

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

  43. 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

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

  44. dsf说道:

    这就是文档?

  45. 老杨说道:

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

  46. riqo说道:

    请教版主个问题:

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

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

  47. 没技术含量说道:

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

    详解 在你眼里就是 含糊。

  48. 爱说实话的人说道:

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