基于jquery编写分页插件

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

基于jquery编写分页插件

来源：阅读：725 次日期：2016-07-22 16:08: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>

$(document).ready(function(){

$('#mypage').mypagination(10112,{

callback:function(page){

alert(page);

}

});

</script>

</head>

运行效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助。

上一篇：jquery+json实现分页效果

下一篇：论JavaScript模块化编程

手机网站地址：基于jquery编写分页插件

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！