这篇文章发布于 2010年01月31日,星期日,01:43,归类于 jQuery相关。 阅读 476703 次, 今日 3 次 61 条评论
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=616
原项目地址:http://plugins.jquery.com/project/pagination
版本:v1.2
源文件下载:英文原版 或中文翻译修改版
翻译:张鑫旭
本文地址: http://www.zhangxinxu.com/wordpress/?p=616
一、相关demo
本文地址: http://www.zhangxinxu.com/wordpress/?p=616
二、简介与说明
- 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。
- 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持text-align的定位。
- 对原js文件注释进行了中文翻译,demo页面也是汉化了的,demo页面的js与原demo有一些出入,但核心不变。
本文地址: http://www.zhangxinxu.com/wordpress/?p=616
三、使用方法
跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是pagination
,例如$("#page").pagination(100);
,这里的100参数是必须的,表示显示项目的总个数,这是最简单的使用,得到的显示如下:
还有一点值得一提的是分页列表需要放在class类为pagination的标签内,您可以使用text-align属性控制分页居中显示还是居右显示。
回调函数一般用来装载对应分页显示的内容,具体参见demo源文件。
本文地址: http://www.zhangxinxu.com/wordpress/?p=616
四、参数
参数名 | 描述 | 参数值 |
---|---|---|
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 | 回调函数 | 默认无执行效果 |
本文地址: http://www.zhangxinxu.com/wordpress/?p=616
五、使用举例
例如下面的使用代码:
$("#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)。您可以对照参数表修改配置这里的参数。
本文地址: http://www.zhangxinxu.com/wordpress/?p=616
六、关于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
以上~
本文为原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=616
(本篇完)
- jQuery图片文本滚动切换插件jCarousel中文翻译与详解 (0.940)
- Ajax Upload多文件上传插件翻译及中文演示 (0.744)
- jQuery boxy弹出层对话框插件中文演示及讲解 (0.716)
- jQuery照片图像剪裁插件Jcrop中文翻译详解 (0.697)
- 新版无图片版zxxbox jQuery弹出框插件 (0.656)
- textField - jQuery文本域操作集插件展示 (0.656)
- jQuery-两款不同原理的圆角插件讲解 (0.637)
- jQuery Lightbox(balupton版)图片展示插件讲解 (0.637)
- 最近整的MooTools库下Mbox弹框插件 (0.474)
- 翻译-IE7/8@font-face嵌入字体与文字平滑 (0.455)
- jQuery-火焰灯效果导航菜单 (RANDOM - 0.353)
分页页码前端是可以实现了,但是实现内容的切换,只显示一条。每页内容只显示一条啊
學習了
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;
}
点击页码,上一页和下一页 回调函数都可以被执行,但是如果有跳转 回调是不能被执行的,请问如何解决?我先试试 ,大神是否有想法?谢谢啦
最近一直困扰长文章(长文本)无刷新分页。能否给点思路呢?
ajax分页页数变化问题怎么处理
最近用了一款 BOOTSTRAP ace的一款框架 也是基于Pagination 封装好的分页 我在使用的时候发现表格的列数 不能超过6列 超过了 分页以及其他JS 功能都失效了 查了好多资料 也不知道为什么 请问这个列数可以在什么地方设置吗
自己解决了
第一个demo,设置分页显示两个项目,同样只显示一个
有个致命的缺陷,有待改进。
如果我在查询第一页结果时,进行初始化:
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,来标志分页已经初始化了,并且在第一次查询第一页,进行分页初始化时,此时的回调我们应该跳过,因为已经查询过了。
张老师,您的第二个 demo 我设置显示每页两条数据,为什么还是1条啊?麻烦说一下
jQuery Pagination Ajax分页插件 的 使用问题, 如果我在页面中放了2个这个插件,
list头部一个,list底部一个, 在点击其中一个分页控件的时候,怎么让另外一个分页控件的当前页码同步?
请教一下,在demo_ajax例子中,为什么修改items_per_page: 2时,每页显示的仍然只有一行数据呢?
初始化的时候,就需要maxentries这个参数,这个我感觉有待优化,能加到回调中就更好了。
目前前台无法自定义每页条数的控制,我修改了一下,加了个下拉列表,而且也没有直接跳转页数。
学习了,另外可以参考下最代码网站上的分页代码:
http://www.zuidaima.com/share/search.htm?key=%E5%88%86%E9%A1%B5
有没有思路解析或者代码详解,想学习一下
不会用,有会的可以联系我。235546373。求教。
范德萨
callback 返回 return false或是true都可以继续单击!
我在加载页面的时候无法再未加载完成前禁止点击别的分页!
多谢楼主的详细介绍,这个JQ分页插件确实好用。num_display_entries 是奇数的时候页码个数不正确的bug在新版本v2.2中已经解决。完全可以改为不需要一次性加载全部数据,可以每点击一次页码用ajax取当前页需要显示的数据,方法是:在页面加载时后端count一次总记录数作为maxentries,然后用page_index去数据库取就行了。
聪明!
不用一次性加载,点击分页ajax就ok了。
$.getJSON(‘createUrl(‘timing/page’)?>’,{“current”:page_index},function(data){
$(‘#Searchresult’).empty().append(data); // //装载对应分页的内容
});
有做好的demo,看不太懂呢
为什么current_page要从0开始,即使是程序员,分页时第一页也应该从1开始吧
谢谢分享
帮我解决了分页问题,给你个赞
我得说这个插件有些问题……比如demo中如果输入的num_display_entries为3或者2的时候。这个从1开始点当到3的时候后面怎么不开始显呢?奇怪。
当初也用了这个插件可是发现有些问题呀。 pageselectCallback有问题的。
接上面,而且发现在pageselectCallback这个函数,好象没用过 jq这个参数,这是为什么?
本人菜鸟,对于第一个demo有点看不懂,虽然运行是正常的。在调用 pageselectCallback 函数,并没有使用任何参数,但在定义 pageselectCallback函数时,是有这2个参数, function pageselectCallback(page_index, jq),我就不懂了,这2个参数是如何传递过去的,望博主答疑。
为什么 我一用就出了个 死循环!
你的第二个Ajax的demo里,,为什么修改items_per_page没用,还是只显示一条,但是分页变了
楼主的那个ajax的分页的调用那eq(pageindex)那写错了,应该是gt((pageindex-1)*pagecount:lt(pagecount)的
这样改了还是不行啊
嗯 写的挺好的。
本人用此分页试验过30万条数据 一点问题没有,看到有有楼说的1万条数据就有问题,不知道有没有试验过,研究过改该控件的人应该知道 这个使用的存储过程是按需取数据 何来显示慢。。。。。无语
gideon 说:
2011年01月28日于23:10
挺好的,只是这样的分页没有什么意义,因为你把所有的数据都提出来了,然后在进行分页。 如果我有个产品页面,如果我有1万多的产品,那么你的这个分页就会把服务器给搞垮了,哈哈,所以分页不结合数据库语言(如php)来实现的话,没有太大的用处!
这分页把所有数据都提出来了?你没有写过代码吧!
百度地图用这个很好。
楼主好,请问在Prev前面怎么加一个’首页’链接 功能与点击’1’相同。请指教。。
我还是看不懂啊!一般都是从数据库提取!怎么传递当前页到服务器啊?
亲,问题解决没?怎么解决的?
我觉得博主的解释已经很好了,给了我很大的帮助。
看了觉得还不清楚的就应该自己再动手试试,程序最关键的还是要自己动手,这样才能加深理解。
如果这个改成每一次翻页callback就比较好了!
问下..
如果第一次初始化的时候不加载 如何做?
翻页才是AJAX..
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;
。。。。
}
1.此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用
此方法,因为加载会比较慢。
这句话说的有问题,误倒了8楼
这个分页不会一次全load所有记录
这个详解不咋的啊。。。
@众人 详解都在翻译的demo中,正文只是引子。
谢谢楼主!非常感谢!膜拜!
哇哦,,又遇到个 好站 ,先收藏了
挺好的,只是这样的分页没有什么意义,因为你把所有的数据都提出来了,然后在进行分页。 如果我有个产品页面,如果我有1万多的产品,那么你的这个分页就会把服务器给搞垮了,哈哈,所以分页不结合数据库语言(如php)来实现的话,没有太大的用处!
可以把你的demo源码发我一份吗?谢谢,感觉你写的挺好的。可以发我邮箱吗?谢谢啦!
晕死,本页有源码好吧
//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
分页初始化完成后这里的内容会被替换。
这就是文档?
不管是否是详解,有帮助吧,顶楼主下,收藏了.
请教版主个问题:
如果我要对一个json文件进行分页该如何写这个分页?
我用了getJson的方法
也就是说 数据不是直接load进来的
我问你啊,如果一个页面有两个分页,你该怎么办呢?你会吗?
详解 在你眼里就是 含糊。
不要随随便便写点什么就叫详解
很多现实问题你都没有解释清楚
如果做不到面面俱到,就少加那些让人误解的标题!
你有本事你写一个啊,你连个屁都没放过,在这指手画脚。速滚!~
煞。笔
*你*,**