您现在的位置: 365建站网 > 365学习 > 通用的js分页,排序程序

通用的js分页,排序程序

文章来源:365jz.com     点击数:676    更新时间:2009-09-16 11:47   参与评论

/**
 *通用的分页的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+"首页&nbsp;&nbsp;";
  }else{
    str=str+'<a href="JavaScript:void(0);" onclick="javascript:page.first()">首页</a>&nbsp;&nbsp;';
  }
  //是否显示上一页
  if(this.currPage-1<1){
    str=str+"上一页&nbsp;&nbsp;";
  }else{
    str=str+'<a href="javascript:void(0);" onclick="javascript:page.prePage()">上一页</a>&nbsp;&nbsp;';
  }
  //是否显示下一页
  if(this.currPage+1>this.totalPage){
    str=str+"下一页&nbsp;&nbsp;";
  }else{
    str=str+'<a href="javascript:void(0);" onclick="javascript:page.nextPage()">下一页</a>&nbsp;&nbsp;';
  }
    //是否显示尾页
  if(this.currPage==this.totalPage){
    str=str+"尾页&nbsp;&nbsp;";
  }else{
     str=str+'<a href="javascript:void(0);" onclick="javascript:page.last()">尾页</a>&nbsp;&nbsp;';
  }
 
  str=str+'<a href="javascript:void(0);" onclick="javascript:page.go()">转至</a>';
  str=str+'<input type="text" id="go" size="5" />页&nbsp;&nbsp;';
 
  //设置下载数据
  str=str+'<select name="contentType" id="select"><option value="excel">转为Excel格式</option><option value="txt">转为Txt格式</option></select> <a href="javaScript:void(0)" onclick="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);' onclick='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 onload='int()'>
<hr>
<table border="1">
  <tbody id="result">
   
  </tbody>
</table>
<div id='foot'></div>
<hr>
</body>
</html>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (676人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------