浏览 20173 次
|
锁定老帖子 主题：利用JQuery写一个简单的分页插件
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-06-17
扩展JQuery很容易，作为一个练习，编写一个简单的分页插件，代码量不大，直接看代码好了： $.fn.mypagination = function(totalProperty,opts){
opts = $.extend({
perPage:10,
callback:function(){
}
},opts||{});
return this.each(function(){
function numPages(){
return Math.ceil(totalProperty/opts.perPage);
}
function selectPage(page){
return function(){
currPage = page;
if (page<0) currPage = 0;
if (page>=numPages()) currPage = numPages()-1;
render();
$('img.page-wait',panel).attr('src','images/wait.gif');
opts.callback(currPage+1);
$('img.page-wait',panel).attr('src','images/nowait.gif');
}
}
function render(){
var html = '<table><tbody><tr>'
+'<td><a href="#"><img class="page-first"></a></td>'
+'<td><a href="#"><img class="page-prev"></a></td>'
+'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>'
+'<td><a href="#"><img class="page-next"></a></td>'
+'<td><a href="#"><img class="page-last"></a></td>'
+'<td><img src="images/nowait.gif" class="page-wait"></td>'
+'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>'
+'</tr></tbody></table>';
var imgFirst = 'images/page-first-disabled.gif';
var imgPrev = 'images/page-prev-disabled.gif';
var imgNext = 'images/page-next-disabled.gif';
var imgLast = 'images/page-last-disabled.gif';
if (currPage > 0){
imgFirst = 'images/page-first.gif';
imgPrev = 'images/page-prev.gif';
}
if (currPage < numPages()-1){
imgNext = 'images/page-next.gif';
imgLast = 'images/page-last.gif';
}
panel.empty();
panel.append(html);
$('img.page-first',panel)
.bind('click',selectPage(0))
.attr('src',imgFirst);
$('img.page-prev',panel)
.bind('click',selectPage(currPage-1))
.attr('src',imgPrev);
$('img.page-next',panel)
.bind('click',selectPage(currPage+1))
.attr('src',imgNext);
$('img.page-last',panel)
.bind('click',selectPage(numPages()-1))
.attr('src',imgLast);
$('input.page-num',panel)
.val(currPage+1)
.change(function(){
selectPage($(this).val()-1)();
});
}
var currPage = 0;
var panel = $(this);
render();
});
}
下面测试一下： <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mypagination.css"/>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.mypagination.js"></script>
<script>
$(document).ready(function(){
$('#mypage').mypagination(10112,{
callback:function(page){
alert(page);
}
});
});
</script>
</head>
<div id="mypage" class="mypagination"></div>
运行效果图如下：
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-08-11
要是写了注释就更好了，方便我们这样的小鸟也能够看懂。
|
| 返回顶楼 | |
|
发表时间：2008-09-11
这个插件怎么用呢？
|
| 返回顶楼 | |
|
发表时间：2008-09-11
changjiang.lee 写道
这个插件怎么用呢？
在callback中显示指定页的页面就好。 另外，这个插件功能有些简单，仅是说明一下原理，使用时根据情况扩展或改写一下。 |
| 返回顶楼 | |
|
发表时间：2008-10-10
<script type="text/javascript" src="jquery-1.2.6.js"></script>
能上传下这个js吗 |
| 返回顶楼 | |
|
发表时间：2008-10-10
375721064 写道 <script type="text/javascript" src="jquery-1.2.6.js"></script>
能上传下这个js吗 http://jqueryjs.googlecode.com/files/jquery-1.2.6.js |
| 返回顶楼 | |
|
发表时间：2008-10-23
callback:function(page){
$("#feeds").load("feeds.do?page="+page); } 这个page就是当前页码，最简单用load就可显示当前页码的页面了，当然需要在页面中加入<div id="feeds"></div> |
| 返回顶楼 | |
|
发表时间：2008-11-14
版主，能把怎样用的说地详细点吗？比方说：有个List names = new ArralyList();names.add("张三");names.add("李四");......多加几个，用table把list展现出来，怎样分页，希望能回答我，谢谢你，
|
| 返回顶楼 | |
|
发表时间：2008-11-19
写的很好，就是文本框应该再加是css约束，要不五位以后的值就看不见了。
|
| 返回顶楼 | |
|
发表时间：2008-12-13
好东西 界面很好看 看代码好像是针对一次绑定所有查询结果然后分页的 ？
|
| 返回顶楼 | |
