JQuery实现的假分页

jquery实现假分页

工作文档 2010-04-09 10:44:20 阅读7 评论0 字号：大中小

/**
*假分页js
*json: 表示要处理的分页对象
*callback:表示处理"分页出来的objs数组"的函数
*此分页返回:objs数组
*/
function Branch(json,call){ //分页对象
this.branchJson = json;
this.objs = new Array();
this.cb = call;

this.branch(json,call);
}

/********以下是分页对象的自定义函数***********/

Branch.prototype.branch = function(json,call){
if(this.objs!=null) this.objs = null;

this.setWorth(this.branchJson);

var nowPage = $(".nowPage").val(); //当前是第几页

var pageSize = $(".pageSize").val(); //每页显示的数量

var maxCount = $(".maxCount").val(); //总多少条记录

this.objs = this.obj_branch(this.branchJson,nowPage,pageSize,maxCount);

call(this.objs);

}
Branch.prototype.setWorth = function(bJson){ //设值
var i = 0;
for(var a in bJson){
i++;
}
$(".maxCount").attr("value",i);
var pageSize = parseInt( $(".pageSize").val() );
var sumPage = null;

if(pageSize != 0){
sumPage = i % pageSize > 0 ? (i / pageSize) + 1 : i / pageSize;
}else{
sumPage = $(".maxCount").val();
}

$(".sumPage").attr("value",parseInt(sumPage));
}

Branch.prototype.obj_branch = function(obj,nowPage,pageSize,maxCount){ //给对象分页
var firstCount = (nowPage - 1) * pageSize; //起始对象数
var endCount = (nowPage * pageSize) > maxCount ? maxCount : (nowPage * pageSize); //终止对象数

var objss = new Array();　
var j = 0;
for(var i = firstCount ; i < endCount ; i++){
objss[j] = obj[i];
j++;
}
return objss;

}

Branch.prototype.setPage = function(){ //设置每页显示记录条数
var size = parseInt( $(".pageSize").val() );

if(size<1){
$(".pageSize").attr("value",0);
}
var max = parseInt( $(".maxCount").val() );
if(size>max){
$(".pageSize").attr("value",max);
}

this.setWorth(this.branchJson);
this.branch(this.branchJson,this.cb);
}

Branch.prototype.firstPage = function(){ //显示首页
$(".nowPage").attr("value",1);
this.setWorth(this.branchJson);
this.branch(this.branchJson,this.cb);
}
Branch.prototype.frontPage = function(){ //前一页
var front = parseInt( $(".nowPage").val() );
if(front<=1){
alert("已经到首页了");
return;
}
$(".nowPage").attr("value",parseInt(front)-1);
this.setWorth(this.branchJson);
this.branch(this.branchJson,this.cb);
}
Branch.prototype.nextPage = function(){ //下一页
var next = parseInt( $(".nowPage").val() );
var sumPage = parseInt( $(".sumPage").val() );
if(next>=sumPage){
alert("已经到尾页了");
return;
}
$(".nowPage").attr("value",parseInt(next)+1);
this.setWorth(this.branchJson);
this.branch(this.branchJson,this.cb);
}
Branch.prototype.endPage = function(){ //尾页
var end = parseInt( $(".nowPage").val() );

var sumPage = parseInt( $(".sumPage").val() );
if(end>=sumPage){
return;
}
$(".nowPage").attr("value",sumPage);
this.setWorth(this.branchJson);
this.branch(this.branchJson,this.cb);
}
Branch.prototype.jumpPage = function(){ //转到
var pageNo = parseInt( $(".pageNo").val() );

var sumPage = parseInt( $(".sumPage").val() );
if(pageNo<1 || pageNo>sumPage){
var now = $(".nowPage").val();
$(".pageNo").attr("value",now);
alert("你所要请求的页面不存在,请重新输入跳转页面");
return;
}
$(".nowPage").attr("value",pageNo);
this.setWorth(this.branchJson);
this.branch(this.branchJson,this.cb);
}



//*************************************************************************************
/**
* 假分页 主程序入口
*
*json:表示要处理的分页对象
*callback:表示处理"分页出来的objs数组"的函数
*/

function make_branch(json,call){

var branch = new Branch(json,call);

//以下是为图片按钮添加事件
$(".setPage").bind('click',function(){ branch.setPage(); });
$(".firstPage").bind('click',function(){ branch.firstPage(); });
$(".frontPage").bind('click',function(){ branch.frontPage(); });
$(".nextPage").bind('click',function(){ branch.nextPage(); });
$(".endPage").bind('click',function(){ branch.endPage(); });
$(".jumpPage").bind('click',function(){ branch.jumpPage(); });
}



//*************************************************************************************
// 画分页按钮
$(document).ready(function(){
_draw_branch_button();
});


function _draw_branch_button(){
var _dbbu = $("._page_branch").val();

if(_dbbu==null || _dbbu=='undefined'){
// alert("您现在在所使用分页,要使用id为'_page_branch'的空div,"
// +"现在系统检测到您所请求的页面没有此标签,请添加如下标签:"

// +"<div class='_page_branch' title='要加分页的module对象名'></div>");
return;
}
var _pbh = $("._page_branch");

_pbh.append("<table width='100%' border='0' cellspacing='0' cellpadding='0'>"
+"<tr>"
+"<td width='30%' height='30'>"
+"共有<input type='text' class='maxCount' style='width:25px;' readonly='readonly' />条记录，"
+" 当前第<input type='text' class='nowPage' value='1' style='width:25px;' readonly='readonly' />页，"
+"共<input type='text' class='sumPage' style='width:25px;' readonly='readonly' />页"
+"</td>"
+"<td width='30%' height='30'>"
+"设置每页显示记录条数<input type='text' class='pageSize' value='10' style='width:25px;'/> "
+"<img src='branch/images/shezhi.gif' width='40' alt='shezhi' height='15' border='0' class='setPage' />"
+"</td>"
+"<td width='40%'>"
+"<img src='branch/images/main_54.gif' title='first' width='40' height='15' border='0' class='firstPage'/> "
+"<img src='branch/images/main_56.gif' width='45' alt='up' height='15' border='0' class='frontPage'/> "
+"<img src='branch/images/main_59.gif' width='45' alt='down' height='15' border='0' class='nextPage' /> "
+"<img src='branch/images/main_61.gif' width='40' alt='end' height='15' border='0' class='endPage' /> "
+"转到<input type='text' class='pageNo' size='4' value='1' style='width:30px;'/>页 "
+"<img src='branch/images/main_63.gif' width='26' height='15' border='0' class='jumpPage' />"
+"</td>"
+"</tr>"
+"</table>");

}

效果图:

jquery实现假分页 - ytrtfhj@126 - 艾冰家园