JS表格分页
2010年01月10日 JavaScript, 头条, 码农之路 8,800 次浏览
今天本来是准备用STRUTS2实现表格分页的，但是突然间发现很麻烦，因为我所有的东西都已经做好了，就只剩下表格没有分页了，要再去改代码的话会很麻烦，就去网上找看有没有简单点的方法，最后决定了用JS实现分页，原因有两点：1、用JS去做不用去改程序的代码，只要加上JS代码就可以了；2、我所有的表格里面的数据都不是很多，不用担心处理速度和内存的问题。
在网上找了上些代码，都不是很好，不能够通用，自己修改了一下，能够通用了，以下是代码（直接复制就可以在网页中看到效果）：
————————pagesplit.js——————————————–
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | // 纯js分页分页函数 // 参数:表对象,当前页码,每页行数,表头行数,表尾行数,分页对象 function pageSplit(obj, pno, psize, headNum, footNum,obj1) { var itable = document.getElementById(obj); var num = itable.rows.length;//表格行数 var realNum = num - headNum - footNum;//实际数据行数 var pageSize = psize;//每页显示行数 if(realNum <= pageSize) { return; } var totalPage = parseInt((realNum+pageSize-1)/pageSize);//总页数 var currentPage = pno;//当前页码 var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行 var endRow = currentPage * pageSize + 1;//结束显示的行 endRow = (endRow > num) ? num : endRow; //前headNum行始终显示 for (i = 0; i < headNum; i++) { var irow = itable.rows[i]; irow.style.display = "block"; } for (var i = headNum; i < num - footNum; i++) { var irow = itable.rows[i]; if (i >= startRow && i < endRow) { irow.style.display = "block"; } else { irow.style.display = "none"; } } //后footNum行始终显示 for (i = num - footNum; i < footNum; i++) { var irow = itable.rows[i]; irow.style.display = "block"; } var tempStr = "共" + currentPage + "/" + totalPage + "页"; if (currentPage > 1) { tempStr += "<a style='cursor:hand;' onClick=\"pageSplit('" + obj + "'," + (1) + "," + psize + "," + headNum + "," + footNum + ",'" + obj1 + "')\">首页</a>"; tempStr += "<a style='cursor:hand;' onClick=\"pageSplit('" + obj + "'," + (currentPage - 1) + "," + psize + "," + headNum + "," + footNum + ",'" + obj1 + "')\">上一页</a>"; } else { tempStr += "首页"; tempStr += "上一页"; } if (currentPage < totalPage) { tempStr += "<a style='cursor:hand;' onClick=\"pageSplit('" + obj + "'," + (currentPage + 1) + "," + psize + "," + headNum + "," + footNum + ",'" + obj1 + "')\">下一页</a>"; tempStr += "<a style='cursor:hand;' onClick=\"pageSplit('" + obj + "'," + (totalPage) + "," + psize + "," + headNum + "," + footNum + ",'" + obj1 + "')\">尾页</a>"; } else { tempStr += "下一页"; tempStr += "尾页"; } document.getElementById(obj1).innerHTML = tempStr; } |
————————pagesplit.js——————————————–
————————pagesplit.html——————————————–
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html> <head> <script type="text/javascript" src="pagesplit.js"></script> </head> <body onLoad="pageSplit('pTable',1,3,1,1,'pSpan');"> <table id="pTable"> <thead> <tr><td>姓名</td><td>姓别</td><td>年龄</td></tr> </thead> <tbody> <tr><td>name1</td><td>sex1</td><td>age1</td></tr> <tr><td>name2</td><td>sex1</td><td>age1</td></tr> <tr><td>name3</td><td>sex1</td><td>age1</td></tr> <tr><td>name4</td><td>sex1</td><td>age1</td></tr> <tr><td>name5</td><td>sex1</td><td>age1</td></tr> <tr><td>name6</td><td>sex1</td><td>age1</td></tr> <tr><td>name7</td><td>sex1</td><td>age1</td></tr> <tr><td>name8</td><td>sex1</td><td>age1</td></tr> <tr><td>name9</td><td>sex1</td><td>age1</td></tr> <tr><td>name10</td><td>sex1</td><td>age1</td></tr> </tbody> <tfoot> <tr><td colspan="3"><span id="pSpan"></span></td></tr> </tfoot> </table> </body> </html> |
————————pagesplit.html——————————————–
我已经自己调试能过了，希望能对大家有用。
>>> Hello World <<<
这篇内容是否帮助到你了呢？
如果你有任何疑问或有建议留给其他朋友，都可以给我留言。