JS表格分頁


 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>JS表格分頁</title> 
<script> 
function Page(iAbsolute,sTableId,sTBodyId,page) 
{ 
    this.absolute = iAbsolute; //每頁最大記錄數 
    this.tableId = sTableId; 
    this.tBodyId = sTBodyId; 
    this.rowCount = 0;//記錄數 
    this.pageCount = 0;//頁數 
    this.pageIndex = 0;//頁索引 
    this.__oTable__ = null;//表格引用 
    this.__oTBody__ = null;//要分頁內容 
    this.__dataRows__ = 0;//記錄行引用 
    this.__oldTBody__ = null; 
    this.__init__(); //初始化; 
}; 
/**//* 
初始化 
*/ 
Page.prototype.__init__ = function(){ 
this.__oTable__ = document.getElementById(this.tableId);//獲取table引用 
this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//獲取tBody引用 
this.__dataRows__ = this.__oTBody__.rows; 
this.rowCount = this.__dataRows__.length; 
try{ 
this.absolute = (this.absolute <= 0) || (this.absolute>this.rowCount) ? this.rowCount : this.absolute; 
this.pageCount = parseInt(this.rowCount%this.absolute == 0 
? this.rowCount/this.absolute : this.rowCount/this.absolute+1); 
}catch(exception){} 
this.__updateTableRows__(); 
}; 
Page.prototype.GetBar=function(obj) 
{ 
var bar= document.getElementById(obj.id); 
bar.innerHTML= "每頁"+this.absolute+"條/共"+this.rowCount+"";// 第2頁/共6頁 首頁 上一頁 1 2 3 4 5 6 下一頁 末頁 
} 
/**//* 
下一頁 
*/ 
Page.prototype.nextPage = function(){ 
if(this.pageIndex + 1 < this.pageCount){ 
this.pageIndex += 1; 
this.__updateTableRows__(); 
} 
}; 
/**//* 
上一頁 
*/ 
Page.prototype.prePage = function(){ 
if(this.pageIndex >= 1){ 
this.pageIndex -= 1; 
this.__updateTableRows__(); 
} 
}; 
/**//* 
首頁 
*/ 
Page.prototype.firstPage = function(){ 
if(this.pageIndex != 0){ 
this.pageIndex = 0; 
this.__updateTableRows__(); 
} 
}; 
/**//* 
尾頁 
*/ 
Page.prototype.lastPage = function(){ 
if(this.pageIndex+1 != this.pageCount){ 
this.pageIndex = this.pageCount - 1; 
this.__updateTableRows__(); 
} 
}; 
/**//* 
頁定位方法 
*/ 
Page.prototype.aimPage = function(){ 
var abc = document.getElementById("pageno"); 
var iPageIndex = abc.value; 
var iPageIndex = iPageIndex*1; 
if(iPageIndex > this.pageCount-1){ 
this.pageIndex = this.pageCount -1; 
}else if(iPageIndex < 0){ 
this.pageIndex = 0; 
}else{ 
this.pageIndex = iPageIndex-1; 
} 
this.__updateTableRows__(); 
}; 
/**//* 
執行分頁時,更新顯示表格內容 
*/ 
Page.prototype.__updateTableRows__ = function(){ 
var iCurrentRowCount = this.absolute * this.pageIndex; 
var iMoreRow = this.absolute+iCurrentRowCount > this.rowCount ? this.absolute+iCurrentRowCount - this.rowCount : 0; 
var tempRows = this.__cloneRows__(); 
var removedTBody = this.__oTable__.removeChild(this.__oTBody__); 
var newTBody = document.createElement("TBODY"); 
newTBody.setAttribute("id", this.tBodyId); 
for(var i=iCurrentRowCount; i < this.absolute+iCurrentRowCount-iMoreRow; i++){ 
newTBody.appendChild(tempRows[i]); 
} 
this.__oTable__.appendChild(newTBody); 
this.__dataRows__ = tempRows; 
this.__oTBody__ = newTBody; 
//頁腳顯示分 
var divFood = document.getElementById("divFood");//分頁工具欄 
divFood.innerHTML=""; 
var rightBar = document.createElement("divFood"); 
rightBar.setAttribute("display",""); 
rightBar.setAttribute("float","left"); 
rightBar.innerHTML=""+(this.pageIndex+1)+"頁/共"+this.pageCount+""; 
var isOK="Y"; 
var cssColor=""; 
divFood.appendChild(rightBar); 
////頁腳顯示分頁結 
}; 
/**//* 
克隆原始操作行集合 
*/ 
Page.prototype.__cloneRows__ = function(){ 
var tempRows = []; 
for(var i=0; i<this.__dataRows__.length; i++){ 
tempRows[i] = this.__dataRows__[i].cloneNode(1); 
} 
return tempRows; 
}; 
</script> 
<script type="text/javascript" language="javascript"> 
window.onload = function(){ 
page = new Page(3,'senfe','group_one'); }; 
</script> 
<style type="text/css"><!-- 
#senfe { 
border-top: #000 1px solid; 
border-left: #000 1px solid; 
} 
#senfe td { 
border-right: #000 1px solid; 
border-bottom: #000 1px solid; 
} 
--></style> 
<script language="javascript">
//改表格顏色
<!-- 
// function senfe(o,a,b,c,d){ 
// var t=document.getElementById(o).getElementsByTagName("tr"); 
// for(var i=0;i<t.length;i++){ 
// t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b; 
// } 
// } 
-->
    
</script> 
</head> 
<body> 
<div> 
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#006600" id="senfe"> 
<thead> 
<tr align="center" valign="middle"> 
<td width="46" height="23" bgcolor="#FFFFFF">編號</td> 
<td width="71" bgcolor="#FFFFFF"><select name="select" dir="ltr"> 
<option>套類別</option> 
<option>A套</option> 
<option>B套</option> 
</select></td> 
<td width="53" bgcolor="#FFFFFF">名稱</td> 
<td width="53" bgcolor="#FFFFFF">數量</td> 
<td width="53" bgcolor="#FFFFFF">單價</td> 
<td width="95" bgcolor="#FFFFFF"><select name="select" dir="ltr"> 
<option>單位</option> 
<option></option> 
<option></option> 
</select></td> 
<td width="80" bgcolor="#FFFFFF">酒店名稱</td> 
<td width="35" bgcolor="#FFFFFF">備注</td> 
</tr> 
</thead> 
<tbody id="group_one"> 
<tr> 
<td>1</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>2</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>3</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>4</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>5</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>6</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>7</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>8</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>9</td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
</tbody> 
</table> 
<script language="javascript"><!-- 
//senfe("表格名稱","奇數行背景","偶數行背景","鼠標經過背景","點擊后背景"); 
senfe("senfe","#fff","#ccc","#cfc","#f00"); 
--></script> 
</div> 
<div><a href="#" onclick="page.firstPage();">首 頁</a>/<a href="#" onclick="page.nextPage();">下一頁</a>/<a href="#" onclick="page.prePage();">上一頁</a>/<a href="#" onclick="page.lastPage();">末 頁</a><span id="divFood"> 
</span> 
/第 
<input id="pageno" value="1" style="width:20px"/>頁/<a href="#" onclick="page.aimPage();">跳轉</a></div> 
</div> 
</div> 
</body> 
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM