jQuery Pagination Ajax分页插件中文详解

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=616

一、相关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

(本篇完)

标签: , , , , , , ,

17 条评论 发表在“jQuery Pagination Ajax分页插件中文详解”上

  1. 爱说实话的人 说:

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

  2. 没技术含量 说:

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

    详解 在你眼里就是 含糊。

  3. riqo 说:

    请教版主个问题:

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

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

  4. 老杨 说:

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

  5. dsf 说:

    这就是文档?

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

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

  7. 小吴 说:

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

  8. gideon 说:

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

  9. 游客 说:

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

  10. liujin834 说:

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

  11. lixiphp 说:

    这个详解不咋的啊。。。

  12. 张 鑫旭 说:

    @众人 详解都在翻译的demo中,正文只是引子。

  13. nassri 说:

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

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

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

  14. 三告习习 说:

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

    }

  15. qlj 说:

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

  16. Leoric 说:

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

  17. Konata9 说:

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

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

留下回复