html分页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <table width="500" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999"> <tr> <th colspan="5">lishewen</th> </tr> <tbody id="tablelsw"> <tr> <td bgcolor="#FFFFFF">1</td> <td bgcolor="#FFFFFF">算神</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF">2</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF">3</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF">4</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF">5</td> <td bgcolor="#FFFFFF">黎摄文</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF">6</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF">7</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF">8</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF">9</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF">10</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF">11</td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> </tbody> </table> <span id="spanFirst">首页</span> <span id="spanPre">上一页</span> <span id="spanNext">下一页</span> <span id="spanLast">尾页</span> 第<span id="spanPageNum"></span>页/共 <span id="spanTotalPage"></span>页 </body> </html> <script> // JavaScript Document By lishewen var theTable = document.getElementById("tablelsw"); //大表 var totalPage = document.getElementById("spanTotalPage"); //总页数 var pageNum = document.getElementById("spanPageNum");//第几页 var spanPre = document.getElementById("spanPre"); //上一页 var spanNext = document.getElementById("spanNext"); //下一页 var spanFirst = document.getElementById("spanFirst");//首页 var spanLast = document.getElementById("spanLast"); //尾页 var numberRowsInTable = theTable.rows.length; //大表的行数 var pageSize = 4; //常量 var page = 1; //变量 //下一页 function next(){ hideTable();//隐藏所有表格 currentRow = pageSize * page; //本页最底列数显示的数字 maxRow = currentRow + pageSize; //下页最底列数显示的数字 if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable; for ( var i = currentRow; i< maxRow; i++ ){ theTable.rows[i].style.display = ''; //重新显示出来 } page++; if ( maxRow == numberRowsInTable ) { nextText(); lastText(); }//if(尾页) 下一页和尾页的链接不设 showPage(); //显示页数 preLink(); //上一页的链接 firstLink(); //首页的链接 } //上一页 function pre(){ hideTable(); //隐藏所有表格 page--; //(上)本页页数 currentRow = pageSize * page; //本页最底列数显示的数字 maxRow = currentRow - pageSize; //上页最底列数显示的数字 if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable; for ( var i = maxRow; i< currentRow; i++ ){ theTable.rows[i].style.display = ''; //把本页的显示出来 } if ( maxRow == 0 ){ preText(); firstText(); } //if(首页) 首页和上一页的链接不设 showPage(); //显示页数 nextLink(); //下页的链接 lastLink(); //尾页的链接 } //第一页 function first(){ hideTable(); //隐藏所有表格 page = 1; for ( var i = 0; i<pageSize; i++ ){ theTable.rows[i].style.display = ''; //把本页显示出来 } showPage(); //显示页数 firstText(); //首页的链接不设 preText(); //上页的链接不设 nextLink(); //下页的链接 lastLink(); //尾页的链接 } //最后一页 function last(){ hideTable(); //隐藏所有表格 page = pageCount(); //本页页数 currentRow = pageSize * (page - 1); //本页首行的数字 for ( var i = currentRow; i<numberRowsInTable; i++ ){ theTable.rows[i].style.display = ''; //把本页显示出来 } showPage(); //显示页数 preLink(); //上页的链接 nextText(); //下页的链接不设 firstLink(); //首页的链接 lastText(); //尾页的链接不设 } //隐藏所有表格 function hideTable(){ for ( var i = 0; i<numberRowsInTable; i++ ){ theTable.rows[i].style.display = 'none'; } } //显示页数 function showPage(){ pageNum.innerHTML = page; } //总共页数 function pageCount(){ var count = 0; if ( numberRowsInTable%pageSize != 0 ) count = 1; return parseInt(numberRowsInTable/pageSize) + count; } //显示链接 function preLink(){ spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";} function preText(){ spanPre.innerHTML = "上一页";} function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";} function nextText(){ spanNext.innerHTML = "下一页";} function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>首页</a>";} function firstText(){ spanFirst.innerHTML = "首页";} function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>尾页</a>";} function lastText(){ spanLast.innerHTML = "尾页";} //首页隐藏表格 function hide(){ for ( var i = pageSize; i<numberRowsInTable; i++ ){ theTable.rows[i].style.display = 'none'; } //隐藏除首页的其他表格 totalPage.innerHTML = pageCount(); pageNum.innerHTML = '1'; nextLink(); lastLink(); } hide(); </script>
这个例子转自http://www.cnblogs.com/137913828S2/archive/2012/07/16/js%E5%88%86%E9%A1%B5.html
不过经过修改，最终效果在首页里首页链接失效，在尾页里尾页链接失效
而且列数都是以html里写的tbody的行数来确定页数，如果不知道tbody的行数，无法直接使用该例子，需要改改，但思路是一样的
浙公网安备 33010602011771号