Javascript表格翻页效果实现思路及代码

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

　　<HTML>

　　<HEAD>

　　<style>

　　body, td{

　　font-size: 9pt;

　　}

　　a:link {

　　color: #FF0000;

　　}

　　a:visited {

　　color: #FF0000;

　　}

　　a:hover {

　　color: #006600;

　　}

　　</style>

<!--

　　var record = 4;//每页显示多少条记录

　　var count = 24;//记录总数

　　var pageTotal = ((count+record-1)/record)|0;//总页数

　　var pagenum = 1;//将要显示的页码

　　Cookie = {

　　Set : function (){

　　var name = arguments[0], value = escape(arguments[1]), days = 365, path = "/";

　　if(arguments.length > 2) days = arguments[2];

　　if(arguments.length > 3) path = arguments[3];

　　with(new Date()){

　　setDate(getDate()+days);

　　days=toUTCString();

　　}

　　document.cookie = "{0}={1};expires={2};path={3}".format(name, value, days, path);

　　Get : function (){

　　var returnValue=document.cookie.match(new RegExp("[\b\^;]?" + arguments[0] + "=([^;]*)(?=;|\b|$)","i"));

　　return returnValue?unescape(returnValue[1]):returnValue;

　　}

　　String.prototype.format = function(){

　　var tmpStr = this;

　　var iLen = arguments.length;

　　for(var i=0;i<iLen;i++){

　　tmpStr = tmpStr.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);

　　}

　　return tmpStr;

　　}

　　function setPagenum(){//整理Cookie

　　pagenum = Cookie.Get("pagenum");

　　if(pagenum=="" || pagenum<1){

　　pagenum=1;

　　}

　　setPagenum();

　　//重新整理当前页码，如果页面小于1，则赋值为1，如果大于总页数，则等于总页数

　　coordinatePagenum(pagenum);

　　//根据当前要显示的页码取得当前面里第一条记录的号码

　　var pageBegin = (record*(pagenum-1)+1)|0;

　　//根据当前要显示的页码取得当前面里最后一条记录的号码

　　var pageEnd = record*pagenum;

　　function showhiddenRecord(pagenum){

　　number.innerHTML=pagenum;

　　if(pagenum<=1){

　　theFirstPage.innerHTML="第一页";

　　thePrePage.innerHTML="上一页";

　　}else{

　　theFirstPage.innerHTML="<a href=\"javascript:firstPage()\">第一页</a>";

　　thePrePage.innerHTML="<a href=\"javascript:prePage()\">上一页</a>";

　　}

　　if(pagenum>=pageTotal){

　　theNextPage.innerHTML="下一页";

　　theLastPage.innerHTML="最后一页";

　　}else{

　　theNextPage.innerHTML="<a href=\"javascript:nextPage()\">下一页</a>";

　　theLastPage.innerHTML="<a href=\"javascript:lastPage()\">最后一页</a>";

　　}

　　document.getElementById('goto').value=pagenum;

　　//根据当前要显示的页码取得当前面里第一条记录的号码

　　pageBegin = (record*(pagenum-1)+1)|0;

　　//根据当前要显示的页码取得当前面里最后一条记录的号码

　　pageEnd = record*pagenum;

　　for(var i=1;i<=count;i++){

　　if(i>=pageBegin && i<=pageEnd){

　　mytable.rows[i].style.display="";

　　}else{

　　mytable.rows[i].style.display="none";

　　}

　　Cookie.Set("pagenum", pagenum);

　　}

　　function firstPage(){

　　pagenum=1;

　　showhiddenRecord(pagenum);

　　}

　　function lastPage(){

　　showhiddenRecord(pageTotal);

　　}

　　//重新整理当前页码，如果页面小于1，则赋值为1，如果大于总页数，则等于总页数

　　function coordinatePagenum(num){

　　if(num<1){

　　num="1";

　　}else if(num>pageTotal){

　　num=pageTotal;

　　}

　　function prePage(){

　　pagenum--;

　　coordinatePagenum(pagenum);

　　showhiddenRecord(pagenum);

　　}

　　function nextPage(){

　　pagenum++;

　　coordinatePagenum(pagenum);

　　showhiddenRecord(pagenum);

　　}

　　function gotoPage(num){

　　coordinatePagenum(pagenum);

　　showhiddenRecord(num);

　　}

　　//-->

　　</SCRIPT>

　　</HEAD>

　　共 6 页当前第 <span id="number">1</span> 页

　　转到第<select onChange="gotoPage(this.value)" name="goto">

　　</select>页

　　</center>

　　</TABLE>

　　</BODY>

　　</HTML>

教程首页更多教程