五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 通用的js分頁(yè)，排序程序

通用的js分頁(yè)，排序程序

文章來(lái)源：365jz.com     點(diǎn)擊數(shù)：746    更新時(shí)間：2009-09-16 11:47   參與評(píng)論

/**
 *通用的分頁(yè)的js代碼
 *可對(duì)JSON格式的二維數(shù)據(jù)進(jìn)行靜態(tài)頁(yè)面的分頁(yè)。
 *  @author:liyi
 * 
 *  Edit by liyi:2009年9月11日 增加設(shè)置列寬和排序的功能 
 *
 */

 
  var filetitle;
  var filedata;
  var fileattr;
  var filetotal;
 /**
 *分頁(yè)對(duì)象
 * @jonsData:json格式的數(shù)據(jù)對(duì)象
 * @attr:數(shù)據(jù)的屬性 json格式  兩個(gè)屬性name(屬性名稱),type(數(shù)據(jù)類型[int ,float,string,date]為分頁(yè)提供比較的依據(jù)
 * @pageSize:每頁(yè)顯示多少筆
 * @tableId:要加入的table
 * @showTtl:標(biāo)題 數(shù)組(如果要設(shè)置列寬傳入的數(shù)組可以是： "列名:寬度"  的格式，寬度可以使百分比耶可以使像素)
 * @tableShowName:table的標(biāo)題名稱
 * @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;        //記錄當(dāng)前排序的列
  this.sortDown=true;       //記錄是升序還是降序 boolean:true表示降序 false表示升序
  
  //下載文件用到的數(shù)據(jù)
  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){//如果總記錄數(shù)小于每頁(yè)顯示數(shù)據(jù)
   this.showData(1,this.total);
  }else{
   this.showData(1,this.pageSize);
 }
}

/**
*下一頁(yè)
*/
Page.prototype.nextPage=function(){
  
  if(this.currPage==Math.ceil(this.total/this.pageSize)){//如果是最后頁(yè)
     return false;
  }else if(this.currPage==Math.ceil(this.total/this.pageSize)-1){//如果是倒數(shù)第二頁(yè)
   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);
  }
  
}

/**
 *上一頁(yè)
 */
Page.prototype.prePage=function(){
 if(this.currPage==1){//已經(jīng)是首頁(yè)
    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);
 }
}

/**
 *首頁(yè)
 */
Page.prototype.first=function(){
  if(this.currPage==1){//已經(jīng)是首頁(yè)
   return false;
  }else{
   this.currPage=1;
   this.showTitle(this.showTtl);
   this.showData(this.pageSize*(this.currPage-1)+1,this.pageSize*this.currPage);
  }
}

/**
 *最后頁(yè)
 */
Page.prototype.last=function(){
 if(this.currPage==this.totalPage){//已經(jīng)是最后頁(yè)
  return false;
 }else{
  this.currPage=this.totalPage;
   this.showTitle(this.showTtl);
   this.showData(this.pageSize*(this.currPage-1)+1,this.total);
 }
}

/**
 *跳轉(zhuǎn)到多少頁(yè)
 */
Page.prototype.go=function(){
 var goObj=document.getElementById('go');
 var index=parseInt(goObj.value);//強(qiáng)制轉(zhuǎn)換為整型
 if(!(/^\d+$/.test(index))){
  alert('請(qǐng)輸入數(shù)字!');
  goObj.focus();
  goObj.value="";
  return false;
 }
 if(index<1||index>this.totalPage){//超出范圍
  alert('請(qǐng)選擇正確的范圍!');
  goObj.focus();
  goObj.value="";
  return false;
 }
 if(index==this.totalPage){//如果是最后頁(yè)
  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);
  }
}

/**
 *顯示數(shù)據(jù)
 */
Page.prototype.showData=function(from,to){ 
 var attr=this.attr;//得到屬性數(shù)組

  //生成表格
 for(i=0;i<=to-from;i=i+1){
     //增加行
     var tr=document.createElement("tr");
     //增加序號(hào)
      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){
       //增加一個(gè)
       var td=document.createElement("td");
       //td.setAttribute("align","center");
       td.align="center";
       //設(shè)置數(shù)據(jù)      
       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>頁(yè) ';
   str=str+'當(dāng)前第<span>'+this.currPage+'</span>頁(yè)</p>';
 //設(shè)置下載數(shù)據(jù)
  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">';
  //是否顯示首頁(yè)
  if(this.currPage==1){
    str=str+"首頁(yè)&nbsp;&nbsp;";
  }else{
    str=str+'<a href="javascript:void(0);" onclick="javascript:page.first()">首頁(yè)</a>&nbsp;&nbsp;';
  }
  //是否顯示上一頁(yè)
  if(this.currPage-1<1){
    str=str+"上一頁(yè)&nbsp;&nbsp;";
  }else{
    str=str+'<a href="javascript:void(0);" onclick="javascript:page.prePage()">上一頁(yè)</a>&nbsp;&nbsp;';
  }
  //是否顯示下一頁(yè)
  if(this.currPage+1>this.totalPage){
    str=str+"下一頁(yè)&nbsp;&nbsp;";
  }else{
    str=str+'<a href="javascript:void(0);" onclick="javascript:page.nextPage()">下一頁(yè)</a>&nbsp;&nbsp;';
  }
    //是否顯示尾頁(yè)
  if(this.currPage==this.totalPage){
    str=str+"尾頁(yè)&nbsp;&nbsp;";
  }else{
     str=str+'<a href="javascript:void(0);" onclick="javascript:page.last()">尾頁(yè)</a>&nbsp;&nbsp;';
  }
 
  str=str+'<a href="javascript:void(0);" onclick="javascript:page.go()">轉(zhuǎn)至</a>';
  str=str+'<input type="text" id="go" size="5" />頁(yè)&nbsp;&nbsp;';
 
  //設(shè)置下載數(shù)據(jù)
  str=str+'<select name="contentType" id="select"><option value="excel">轉(zhuǎn)為Excel格式</option><option value="txt">轉(zhuǎn)為Txt格式</option></select> <a href="javaScript:void(0)" onclick="document.downloadform.submit();">下載</a>';
  str=str+'</p>';
  str=str+'</form>';

 
  foot.innerHTML=str;
 
}

/**
 *顯示table名稱，標(biāo)題
 */
Page.prototype.showTitle=function(tabTitle){
 var title=new Array();
 title=tabTitle;
 
 //刪除原來(lái)的數(shù)據(jù)
  for(k=this.table.rows.length-1;k>=0;k--){
   this.table.deleteRow(k);
  }
 
 //創(chuàng)建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);
 
 //創(chuàng)建標(biāo)題欄
 var tr=document.createElement('tr');
 
   //添加序號(hào)
   var td_xh=document.createElement('th');
    td_xh.innerHTML="序號(hào)";
    tr.appendChild(td_xh);
   
    var curTitle;   //記錄當(dāng)前列名
   
     //創(chuàng)建標(biāo)題
 for(i=0;i<title.length;i=i+1){
      //創(chuàng)建欄位
     var td=document.createElement('th');
    
     /**
     *
     *2009年9月11日增加設(shè)置列寬和排序的功能
     */
     if(title[i].indexOf(':')!=-1){//有設(shè)置列寬
      td.width=title[i].split(':')[1];
      curTitle=title[i].split(':')[0];
     }else{      //沒(méi)有設(shè)置列寬
       //設(shè)置值
     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){//如果是當(dāng)前列
     this.data.reverse();
     this.sortDown=!this.sortDown;
     //從新顯示數(shù)據(jù)
      this.initPage();
 }else{
  this.sortDown=!this.sortDown;
    this.sortRow=colName;
    //得到當(dāng)前屬性的數(shù)據(jù)類別
    var ty=getType(colName);
   this.data.sort(compare(colName,ty));
   this.initPage();
 }
 
 //得到數(shù)據(jù)的類型
 function getType(col){
  var type="";
  for(var i in attr){
    if(attr[i].name==col){
      type=attr[i].type;
     }
  }
  return type;
 }
 
 //比較函數(shù)
 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數(shù)組,組織成以tab分隔的字符串
 */
 function titleToString(){
  var str="序號(hào)";
  for(i=0;i<filetitle.length;i=i+1){
     str=str+"\t"+filetitle[i];
  }
  return str;
 }

 /**
 *將json,data數(shù)組,組織成以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;
 }
 
 --------------------------------------------------------------------

測(cè)試的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:'中文測(cè)試',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>

如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇

發(fā)表評(píng)論 (746人查看，0條評(píng)論)
請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。
昵稱：
最新評(píng)論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學(xué)習(xí)

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時(shí)間：9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號(hào)