本文共 9300 字,大约阅读时间需要 31 分钟。
/**
*通用的分页的js代码 *可对JSON格式的二维数据进行静态页面的分页。 * @author:liyi * * Edit by liyi:2009年9月11日 增加设置列宽和排序的功能 * */var filetitle; var filedata; var fileattr; var filetotal; /** *分页对象 * @jonsData:json格式的数据对象 * @attr:数据的属性 json格式 两个属性name(属性名称),type(数据类型[int ,float,string,date]为分页提供比较的依据 * @pageSize:每页显示多少笔 * @tableId:要加入的table * @showTtl:标题 数组(如果要设置列宽传入的数组可以是: "列名:宽度" 的格式,宽度可以使百分比耶可以使像素) * @tableShowName:table的标题名称 * @isSort: boolean 是否需要排序 */ function Page(jsonData,attr,pageSize,tableId,showTtl,tableShowName,isSort){ this.data=jsonData; this.tableId=tableId; this.pageSize=pageSize; this.total=jsonData.length; this.attr=attr; this.showTtl=showTtl; this.tableShowName=tableShowName; this.currPage; this.table=document.getElementById(this.tableId); this.totalPage=Math.ceil(this.total/this.pageSize); this.isSort=isSort; //是否需要排序 this.sortRow; //记录当前排序的列 this.sortDown=true; //记录是升序还是降序 boolean:true表示降序 false表示升序 //下载文件用到的数据 filetitle=showTtl; filedata=jsonData; fileattr=attr; filetotal=jsonData.length; this.initPage(); }
Page.prototype.initPage=function(){ this.currPage=1; this.showTitle(this.showTtl); if(this.total<this.pageSize){//如果总记录数小于每页显示数据 this.showData(1,this.total); }else{ this.showData(1,this.pageSize); }}
/**
*下一页*/ Page.prototype.nextPage=function(){ if(this.currPage==Math.ceil(this.total/this.pageSize)){//如果是最后页 return false; }else if(this.currPage==Math.ceil(this.total/this.pageSize)-1){//如果是倒数第二页 this.currPage=this.currPage+1; this.showTitle(this.showTtl); this.showData(this.pageSize*(this.currPage-1)+1,this.total); }else{ this.currPage=parseInt(this.currPage)+1; this.showTitle(this.showTtl); this.showData(this.pageSize*(this.currPage-1)+1,this.pageSize*this.currPage); } }/**
*上一页 */Page.prototype.prePage=function(){ if(this.currPage==1){//已经是首页 return false; }else{ this.currPage=parseInt(this.currPage)-1; this.showTitle(this.showTtl); this.showData(this.pageSize*(this.currPage-1)+1,this.pageSize*this.currPage); }}/**
*首页 */Page.prototype.first=function(){ if(this.currPage==1){//已经是首页 return false; }else{ this.currPage=1; this.showTitle(this.showTtl); this.showData(this.pageSize*(this.currPage-1)+1,this.pageSize*this.currPage); }}/**
*最后页 */Page.prototype.last=function(){ if(this.currPage==this.totalPage){//已经是最后页 return false; }else{ this.currPage=this.totalPage; this.showTitle(this.showTtl); this.showData(this.pageSize*(this.currPage-1)+1,this.total); }}/**
*跳转到多少页 */Page.prototype.go=function(){ var goObj=document.getElementById('go'); var index=parseInt(goObj.value);//强制转换为整型 if(!(/^/d+$/.test(index))){ alert('请输入数字!'); goObj.focus(); goObj.value=""; return false; } if(index<1||index>this.totalPage){//超出范围 alert('请选择正确的范围!'); goObj.focus(); goObj.value=""; return false; } if(index==this.totalPage){//如果是最后页 this.currPage=index; this.showTitle(this.showTtl); this.showData(this.pageSize*(this.currPage-1)+1,this.total); }else{ this.currPage=index; this.showTitle(this.showTtl); this.showData(this.pageSize*(this.currPage-1)+1,this.pageSize*this.currPage); }}/**
*显示数据 */Page.prototype.showData=function(from,to){ var attr=this.attr;//得到属性数组//生成表格
for(i=0;i<=to-from;i=i+1){ //增加行 var tr=document.createElement("tr"); //增加序号 var td_xh=document.createElement('td'); //td_xh.setAttribute("align","center"); td_xh.align="center"; td_xh.innerHTML=i+1; tr.appendChild(td_xh); //增加单元格 for(j=0;j<attr.length;j=j+1){ //增加一个 var td=document.createElement("td"); //td.setAttribute("align","center"); td.align="center"; //设置数据 td.innerHTML=this.data[from-1+i][attr[j].name]; //添加到行里 tr.appendChild(td); } //将行添加到table里 this.table.appendChild(tr); } var foot=document.getElementById('foot'); var str='<p class="all">共<span>'+this.total+"</span>条记录 "; str=str+'共<span>'+this.totalPage+'</span>页 '; str=str+'当前第<span>'+this.currPage+'</span>页</p>'; //设置下载数据 str=str+'<form action="downFeeDetail.action" name="downloadform" target="_blank" method="post">'; str=str+'<input type="hidden" name="contentDisposition" value="'+this.tableShowName+'">'; str=str+'<input type="hidden" name="coulumInfo" value="'+titleToString()+'">'; str=str+'<input type="hidden" name="dataInfo" value="'+dataToString()+'">'; str=str+'<p class="goto">'; //是否显示首页 if(this.currPage==1){ str=str+"首页 "; }else{ str=str+'<a href="javascript:void(0);" οnclick="javascript:page.first()">首页</a> '; } //是否显示上一页 if(this.currPage-1<1){ str=str+"上一页 "; }else{ str=str+'<a href="javascript:void(0);" οnclick="javascript:page.prePage()">上一页</a> '; } //是否显示下一页 if(this.currPage+1>this.totalPage){ str=str+"下一页 "; }else{ str=str+'<a href="javascript:void(0);" οnclick="javascript:page.nextPage()">下一页</a> '; } //是否显示尾页 if(this.currPage==this.totalPage){ str=str+"尾页 "; }else{ str=str+'<a href="javascript:void(0);" οnclick="javascript:page.last()">尾页</a> '; } str=str+'<a href="javascript:void(0);" οnclick="javascript:page.go()">转至</a>'; str=str+'<input type="text" id="go" size="5" />页 '; //设置下载数据 str=str+'<select name="contentType" id="select"><option value="excel">转为Excel格式</option><option value="txt">转为Txt格式</option></select> <a href="javaScript:void(0)" οnclick="document.downloadform.submit();">下载</a>'; str=str+'</p>'; str=str+'</form>';foot.innerHTML=str; }
/**
*显示table名称,标题 */Page.prototype.showTitle=function(tabTitle){ var title=new Array(); title=tabTitle; //删除原来的数据 for(k=this.table.rows.length-1;k>=0;k--){ this.table.deleteRow(k); } //创建table名称 var tr_TableName=document.createElement('tr'); var th_TableName=document.createElement('th'); th_TableName.colSpan=this.showTtl.length+1; th_TableName.innerHTML =this.tableShowName; tr_TableName.appendChild(th_TableName); this.table.appendChild(tr_TableName); //创建标题栏 var tr=document.createElement('tr'); //添加序号 var td_xh=document.createElement('th'); td_xh.innerHTML="序号"; tr.appendChild(td_xh); var curTitle; //记录当前列名 //创建标题 for(i=0;i<title.length;i=i+1){ //创建栏位 var td=document.createElement('th'); /** * *2009年9月11日增加设置列宽和排序的功能 */ if(title[i].indexOf(':')!=-1){//有设置列宽 td.width=title[i].split(':')[1]; curTitle=title[i].split(':')[0]; }else{ //没有设置列宽 //设置值 curTitle=title[i]; } if(this.isSort){//需要排序 td.innerHTML="<a href='javascript:void(0);' οnclick='page.sort(this);' name='"+this.attr[i].name+"'>"+curTitle+"</a>"; }else{//不需要排序 td.innerHTML=curTitle; } //添加到行里 tr.appendChild(td); } this.table.appendChild(tr);}/**
**排序*/Page.prototype.sort=function(col){ //得到需要排序的属性 var colName=col.name; var attr=this.attr; //alert(this.sortRow==colName); if(this.sortRow==colName){//如果是当前列 this.data.reverse(); this.sortDown=!this.sortDown; //从新显示数据 this.initPage(); }else{ this.sortDown=!this.sortDown; this.sortRow=colName; //得到当前属性的数据类别 var ty=getType(colName); this.data.sort(compare(colName,ty)); this.initPage(); } //得到数据的类型 function getType(col){ var type=""; for(var i in attr){ if(attr[i].name==col){ type=attr[i].type; } } return type; } //比较函数 function compare(col,ty){ return function(x,y){ switch (ty.toLowerCase()){ case "int": return parseInt(eval('x.'+col))<parseInt(eval('y.'+col))?-1:parseInt(eval('x.'+col))>parseInt(eval('y.'+col))?1:0; case "float": return parseFloat(eval('x.'+col))<parseFloat(eval('y.'+col))?-1:parseFloat(eval('x.'+col))>parseFloat(eval('y.'+col))?1:0; case "string": return (eval('x.'+col)).localeCompare(eval('y.'+col)); case "date": return eval('x.'+col)<eval('y.'+col)?-1:eval('x.'+col)>eval('y.'+col)?1:0; } }; } } /** *将title数组,组织成以tab分隔的字符串 */ function titleToString(){ var str="序号"; for(i=0;i<filetitle.length;i=i+1){ str=str+"/t"+filetitle[i]; } return str; }/**
*将json,data数组,组织成以tab分隔的字符串 */ function dataToString(){ var str=""; for(i=0;i<filedata.length;i=i+1){ str=str+(i+1)+"/t"; for(j=0;j<fileattr.length;j=j+1){ str=str+filedata[i][fileattr[j]]+"/t"; } str =str+"/r/n"; } str=str+'共'+filetotal+"条记录"; return str; } --------------------------------------------------------------------测试的html:
<html>
<head> <title>trest</title> <script type="text/javascript" src="newPage.js"></script> <script type="text/javascript"> var dataa=[{name:'liyi1',age:'223.3',sex:'男',date:'1997-12-21'}, {name:'liyi2',age:'233.5',sex:'男',date:'1997-12-21'}, {name:'liyi3',age:'243.2',sex:'女',date:'1997-10-29'}, {name:'liyi4',age:'22.3',sex:'女',date:'1997-08-21'}, {name:'liyi5',age:'2.63',sex:'男',date:'1997-08-02'}, {name:'中文',age:'24.3',sex:'男',date:'1994-12-21'}, {name:'liyi7',age:'28.3',sex:'男',date:'1995-12-21'}, {name:'中文测试',age:'5.0',sex:'女',date:'1997-12-21'}, {name:'liyi9',age:'6.7',sex:'男',date:'1897-10-21'}, {name:'liyi0',age:'3',sex:'男',date:'1996-10-21'}, {name:'liyi11',age:'54',sex:'女',date:'1897-10-21'}, {name:'liyi12',age:'5',sex:'男',date:'1992-02-21'}, {name:'sd',age:'32.423',sex:'男',date:'1997-12-23'} ];var page;
function int(){
// var attr=new Array();// attr[0]='name';// attr[1]='age';// attr[2]='sex'; var attr=[{name:'name',type:'string'}, {name:'age',type:'float'}, {name:'sex',type:'string'}, {name:'date',type:'date'} ]; var showtitle=new Array(); showtitle[0]='姓名:80px'; showtitle[1]='年龄:80px'; showtitle[2]='性别:80px'; showtitle[3]='生日:80px'; page=new Page(dataa,attr,20,'result',showtitle,'',true);}
</script>
</head><body οnlοad='int()'><hr><table border="1"> <tbody id="result"> </tbody></table><div id='foot'></div><hr></body></html>转载地址:http://fbyxi.baihongyu.com/