JS table pagination Implementation Code _JAVASCRIPT skills

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta http-equiv= "Content-language" content= "ZH-CN"/>
<meta content= "All" name= "robots"/>
<meta name= "Copyright" content= ""/>
<meta name= "description" content= ""/>
<meta content= "" name= "keywords"/>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
<title> Raw Material Warehouse Management </title>
<script>
function Page (iabsolute,stableid,stbodyid,page)
{
This.absolute = Iabsolute; Maximum number of records per page
This.tableid = Stableid;
This.tbodyid = Stbodyid;
This.rowcount = 0;//number of records
This.pagecount = 0;//Pages
This.pageindex = 0;//Page index
this.__otable__ = null;//Table Reference
this.__otbody__ = null;//to pagination content
this.__datarows__ = 0;//Record row reference
this.__oldtbody__ = null;
This.__init__ (); Class
};
/**//*
Class
*/
page.prototype.__init__ = function () {
this.__otable__ = document.getElementById (This.tableid);//Get Table reference
this.__otbody__ = this.__otable__.tbodies[this.tbodyid];//Get tbody reference
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= "Every page" +this.absolute+ "article/Total" +this.rowcount+ "article";/2nd Page/Total 6 page First prev 1 2 3 4 5 6 Next last
}
/**//*
Next page
*/
Page.prototype.nextPage = function () {
if (This.pageindex + 1 < this.pagecount) {
This.pageindex + 1;
This.__updatetablerows__ ();
}
};
/**//*
Previous page
*/
Page.prototype.prePage = function () {
if (This.pageindex >= 1) {
This.pageindex-= 1;
This.__updatetablerows__ ();
}
};
/**//*
Home
*/
Page.prototype.firstPage = function () {
if (this.pageindex!= 0) {
This.pageindex = 0;
This.__updatetablerows__ ();
}
};
/**//*
Last
*/
Page.prototype.lastPage = function () {
if (this.pageindex+1!= this.pagecount) {
This.pageindex = this.pagecount-1;
This.__updatetablerows__ ();
}
};
/**//*
Page Positioning method
*/
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__ ();
};
/**//*
Update display table contents when paging is performed
*/
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;
Footer Display points
var Divfood = document.getElementById ("Divfood");//Pagination toolbar
Divfood.innerhtml= "";
var Rightbar = document.createelement ("Divfood");
Rightbar.setattribute ("Display", "");
Rightbar.setattribute ("float", "left");
Rightbar.innerhtml= "First" + (this.pageindex+1) + "page/Total" +this.pagecount+ "page";
var isok= "Y";
var csscolor= "";
Divfood.appendchild (Rightbar);
Page footer display pagination knot
};
/**//*
Clone the original ACTION rowset
*/
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>
<body>
<div>
<table border= "0" cellpadding= "0" cellspacing= "0" bordercolor= "#006600" id= "Senfe" >
<thead>
&LT;TR align= "center" valign= "Middle" >
&LT;TD width= "height=" bgcolor= "#FFFFFF" > Number </td>
&LT;TD width= "bgcolor=" "#FFFFFF" ><select name= "select" dir= "ltr" >
<option> Set category </option>
<option>a Set </option>
<option>b Set </option>
</select></td>
&LT;TD width= "bgcolor=" "#FFFFFF" > Name </td>
&LT;TD width= "bgcolor=" "#FFFFFF" > Quantity </td>
&LT;TD width= "bgcolor=" "#FFFFFF" > Unit price </td>
&LT;TD width= "bgcolor=" "#FFFFFF" ><select name= "select" dir= "ltr" >
<option> Unit </option>
<option> </option>
<option> Double </option>
</select></td>
&LT;TD width= "bgcolor=" "#FFFFFF" > Hotel name </td>
&LT;TD width= "bgcolor=" "#FFFFFF" > Notes </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 ("Table name", "Odd row Background", "even line background", "Mouse over Background", "click Background");
SENFE ("Senfe", "#fff", "#ccc", "#cfc", "#f00");
--></script>
</div>
<div><a href= "#" onclick= "Page.firstpage ();" > Home </a>/<a href= "#" onclick= "Page.nextpage ();" > next page </a>/<a href= "#" onclick= "Page.prepage ();" > Prev </a>/<a href= "#" onclick= "Page.lastpage ();" > Last </a><span id= "Divfood" >
</span>
/subsection
<input id= "PageNo" value= "1" style= width:20px "/>"/<a href= "#" onclick= "Page.aimpage ();" > Jump </a></div>
</div>
</div>
</body>