基于jquery编写分页插件
更新时间：2016年03月07日 11:26:36 作者：正文
这篇文章主要为大家详细介绍了基于jquery编写分页插件的相关资料，感兴趣的小伙伴们可以参考一下
扩展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>
运行效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
这篇文章主要介绍了基于jQuery+Cookie实现的防止刷新的在线考试倒计时的方法和示例，有需要的小伙伴可以参考下2015-06-06
jQuery获取Radio,CheckBox选择的Value值(示例代码)
这篇文章主要是对jQuery获取Radio,CheckBox选择的Value值进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
json 是 Ajax 中使用频率最高的数据格式，在浏览器和服务器中之间的通讯可离不开它2011-12-12
Tipso是一款基于jQuery的Tooltip提示框插件，他提供了众多参数，如显示动画持续时间、背景颜色、文本颜色、显示位置、加载ajax内容、回调函数等等。2015-05-05
jQuery UI-Draggable常用参数集合。2010-01-01
今天在做系统测试的时候，原本用Jquery写了一个动态加载的树形菜单，发现在IE7下无法加载数据，(采用的是jquery1.3.2版本的$.ajax方法)，上网查询到原来是IE7的执行ajax是用XMLHTTPRequest来声明的，经过对比果然如此；后采用以下的方法随即解决了问题。2009-11-11
jQuery如今已经成为Web开发中最流行的JavaScript库，通过jQuery和大量的插件，你可以轻松实现各种绚丽的效果。本文将为你介绍一些jquery实用的技巧，希望可以帮助你更加高效地使用jQuery。2015-11-11
这篇文章主要介绍了jQuery实现伸展与合拢panel的方法,可实现操作div层的平滑收缩与展开的功能,涉及jQuery中next、slideUp、slideDown等方法的使用技巧,非常简单实用,需要的朋友可以参考下2015-04-04
用户输入一个表单，输入准考证和验证码，验证用户是否输入表单，点击查询提交，然后从服务器得到返回的数据并显示出来2012-10-10
本文主要介绍jQuery中$符号命名冲突的解决方法，希望能帮到大家，有需要的朋友可以参考一下。2016-06-06
最新评论