之前有在javaeye上看到使用jQuery插件来解决分页的方案,此处记录一下。
具体知识点,请看代码注释。
先上图先:
首先来看一下页面调用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分页插件</title>
<link rel="stylesheet" href="page.css"/>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.page.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//选择渲染地点,然后调用,传入中页数,可以与服务器端很好结合
$('#mypaget').mypage(10112,{
callback:function(page){
$('#result').html("<font>回调函数-----您选择了第"+page+"页</font>");
}
});
});
</script>
</head>
<body>
<div id="mypaget" class="mypage"></div>
<div id="result" class="mypage"></div>
</body>
</html>
插件具体实现代码:
$.fn.mypage = function(totalProperty, opts){
//这里是插件实现的另一种方式
//$.extend 用于扩展自身方法
opts = $.extend({
perPage: 10,
callback: function(){
}
}, opts ||
{});
return this.each(function(){
/*计算总共页数*/
function pagenum(){
return Math.ceil(totalProperty / opts.perPage);
}
/*选定第几页*/
function selectPage(page){
return function(){
currPage = page;
if (page < 0)
currPage = 0;
if (page >= pagenum())
currPage = pagenum() - 1;
render();
$('img.page-wait', panel).attr('src', 'image/wait.gif');
opts.callback(currPage + 1);
$('img.page-wait', panel).attr('src', 'image/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">页/共' +
pagenum() +
'页</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 = 'image/page-first-disabled.gif';
var imgnext = 'image/page-next-disabled.gif';
var imgprev = 'image/page-prev-disabled.gif';
var imglast = 'image/page-last-disabled.gif';
if (currPage > 0) {
imgfirst = 'image/page-first.gif';
imgprev = 'image/page-prev.gif';
}
if (currPage < pagenum() - 1) {
imgnext = 'image/page-next.gif';
imglast = 'image/page-last.gif';
}
panel.empty();
panel.append(html);
/*添加相应的属性,绑定分页事件*/
$('img.page-first', panel).bind('click', selectPage(0)).attr('src', imgfirst);
$('img.page-next', panel).bind('click', selectPage(currPage + 1)).attr('src', imgnext);
$('img.page-prev', panel).bind('click', selectPage(currPage - 1)).attr('src', imgprev);
$('img.page-last', panel).bind('click', selectPage(pagenum() - 1)).attr('src', imglast);
$('input.page-num', panel).val(currPage + 1).change(function(){
/*调用选择页面方法,将当前的参数传入进去*/
selectPage($(this).val() - 1)();
});
}
var currPage = 0;
var panel = $(this);
render();
});
}
- 大小: 4.2 KB
分享到:
相关推荐
jquery插件--表格分页。
小巧的jquery文章分页插件,用得到就拿去吧!
jquery分页插件-内有演示说明 很时用,一看就明白
jquery分页插件-JqueryPagination.zip,前端jquery分页插件
插件描述:表格分页,li分页.
插件描述:基于jQuery的分页插件,配置比较详细。 参考实例:http://www.jq22.com/jquery-info5697
1.添加了表格树的后台分页代码 2.提供了两种表格树的样式选择 3.添加了全选按钮
强大的jquery下拉框插件 下拉框展示带列表分页功能,适合下拉框大量数据展示 下拉框带快速查找,可以快速筛选 支持多选 基于jQuery、Bootstrap2、3开发 也可应用于无任何UI框架的原生HTML环境 Autocomplete输入自动...
jquery分页插件带总数分页代码 jquery分页插件带总数分页代码
1.完善了样式 2.添加了属性 3.修改了bug 最新版本http://download.csdn.net/source/1757010 提供了后台分页模式,以及提供了两种样式选择,提供全选按钮。
jQuery分页插件设置分页内容显示数量的分页代码 jQuery分页插件设置分页内容显示数量的分页代码
jquery-MyPagination分页插件,包括官方实例及所需js等
jQuery-Paging动态分页数据获取插件是一款动态数据获取并分页代码,分页切换时还带有好看的弹性动画效果。
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
简单的jQuery分页插件下载是一款不用分页即可显示的jQuery插件jQuery.page.js。
jquery分页插件结合jsp实例 有什么不晓得的加Q 359709421
jQuery分页插件jQuery分页插件jQuery分页插件jQuery分页插件jQuery分页插件jQuery分页插件
jquery mobile分页显示插件
此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改...