有时候table的列数太长，不利于使用者查询，所以利用JS做了一个table的分页，以下为相关代码 一、JS代码 复制代码 代码如下: <BR> var pageSize = 15; //每页显示的记录条数<BR> var curPage=0; //当前页<BR> var lastPage; //最后页<BR> var direct=0; //方向<BR> var len; //总行数<BR> var page; //总页数<BR> var begin;<BR> var end;<br><br> <BR> $(document).ready(function display(){ <BR> len =$("#mytable tr").length - 1; // 求这个表的总行数，剔除第一行介绍<BR> page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数<BR> // alert("page==="+page);<BR> curPage=1; // 设置当前为第一页<BR> displayPage(1);//显示第一页<br><br> document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页 每页 "; // 显示当前多少页<BR> document.getElementById("sjzl").innerHTML="数据总量 " + len + ""; // 显示数据量<BR> document.getElementById("pageSize").value = pageSize;<br><br> <br><br> $("#btn1").click(function firstPage(){ // 首页<BR> curPage=1;<BR> direct = 0;<BR> displayPage();<BR> });<BR> $("#btn2").click(function frontPage(){ // 上一页<BR> direct=-1;<BR> displayPage();<BR> });<BR> $("#btn3").click(function nextPage(){ // 下一页<BR> direct=1;<BR> displayPage();<BR> });<BR> $("#btn4").click(function lastPage(){ // 尾页<BR> curPage=page;<BR> direct = 0;<BR> displayPage();<BR> });<BR> $("#btn5").click(function changePage(){ // 转页<BR> curPage=document.getElementById("changePage").value * 1;<BR> if (!/^[1-9]\d*$/.test(curPage)) {<BR> alert("请输入正整数");<BR> return ;<BR> }<BR> if (curPage > page) {<BR> alert("超出数据页面");<BR> return ;<BR> }<BR> direct = 0;<BR> displayPage();<BR> });<br><br> <BR> $("#pageSizeSet").click(function setPageSize(){ // 设置每页显示多少条记录<BR> pageSize = document.getElementById("pageSize").value; //每页显示的记录条数<BR> if (!/^[1-9]\d*$/.test(pageSize)) {<BR> alert("请输入正整数");<BR> return ;<BR> }<BR> len =$("#mytable tr").length - 1;<BR> page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数<BR> curPage=1; //当前页<BR> direct=0; //方向<BR> firstPage();<BR> });<BR> });<br><br> function displayPage(){<BR> if(curPage <=1 && direct==-1){<BR> direct=0;<BR> alert("已经是第一页了");<BR> return;<BR> } else if (curPage >= page && direct==1) {<BR> direct=0;<BR> alert("已经是最后一页了");<BR> return ;<BR> }<br><br> lastPage = curPage;<br><br> // 修复当len=1时，curPage计算得0的bug<BR> if (len > pageSize) {<BR> curPage = ((curPage + direct + len) % len);<BR> } else {<BR> curPage = 1;<BR> }<br><br> <BR> document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页 每页 "; // 显示当前多少页<br><br> begin=(curPage-1)*pageSize + 1;// 起始记录号<BR> end = begin + 1*pageSize - 1; // 末尾记录号<br><br> <BR> if(end > len ) end=len;<BR> $("#mytable tr").hide(); // 首先，设置这行为隐藏<BR> $("#mytable tr").each(function(i){ // 然后，通过条件判断决定本行是否恢复显示<BR> if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录<BR> $(this).show();<BR> }); <P> }<BR> 二、HTML代码 复制代码 代码如下: 条 设置 首页上一页下一页尾页 转到 页 跳转 ...剩余的table代码 最后得到的例子效果如图：
