第一个：实现的很常见很简单的显示页数翻页
效果图：
•这是HTML代码，很简单滴（我好像看到了被嫌弃的小眼神）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-"> <script src="js/jquery-...js"></script> <script src="js/demo.js"></script> <link rel="stylesheet" href="js/demo.css"/> <title></title> </head> <body> <table width="" border=""> <thead> <tr> <th>姓名</th> <th>性别</th> <th>编号</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td></td> <td></td> </tr> <tr> <td>tom</td> <td>男</td> <td></td> <td></td> </tr> <tr> <td>李四</td> <td>男</td> <td></td> <td></td> </tr> <tr> <td>二蛋</td> <td>男</td> <td></td> <td></td> </tr> <tr> <td>二丫</td> <td>女</td> <td></td> <td></td> </tr> </tbody> </table> </body> </html>
•下面就是JS代码了
$(function(){ var $table=$('table');//获取表格对象 var currentPage=;//设置当前页默认值为 var pageSize=;//设置每一页要显示的数目 $table.bind('paging', function () { $table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+)*pageSize).show(); //先将tbody中所有的行隐藏，再通过slice结合当前页数和页面显示的数目展现数据 }); var sumRows=$table.find('tbody tr').length;//获取数据总行数 var sumPages=Math.ceil(sumRows/pageSize);//得到总页数 var $pager=$('<div></div>'); for(var pageIndex=;pageIndex<sumPages;pageIndex++){ $('<a href="#"><span>'+(pageIndex+)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){ currentPage=event.data["newPage"]; $table.trigger("paging"); //为每一个要显示的页数上添加触发分页函数 }).appendTo($pager); $pager.append(" "); } $pager.insertAfter($table); $table.trigger("paging"); });
第二个：实现前进页和后退页
效果图：
•这是全部代码，用得原生JS，依然还是很简单滴（好像对原生js有种莫名的喜爱，有木有）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-" /> <title>table分页</title> </head> <body> <style type="text/css"> .tablebox{border:solid px #ddd;} .tablebox td{text-align:center;border:solid px #ddd;padding:px;} </style> <div> <table width="" border="" cellpadding="" cellspacing=""> <tbody id="table"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr><tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr><tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr><tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <div> <span id="spanFirst">第一页</span> <span id="spanPre">上一页</span> <span id="spanNext">下一页</span> <span id="spanLast">最后一页</span> 第<span id="spanPageNum"></span>页/共 <span id="spanTotalPage"></span>页 </div> </div> <script type="text/javascript"> var theTable = document.getElementById("table"); 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 = ; var page = ; //下一页 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(); } 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 == ) { preText(); firstText(); } showPage(); nextLink(); lastLink(); } //第一页 function first() { hideTable(); page = ; for ( var i = ; i<pageSize; i++ ) { theTable.rows[i].style.display = ''; } showPage(); preText(); nextLink(); lastLink(); } //最后一页 function last() { hideTable(); page = pageCount(); currentRow = pageSize * (page - ); for ( var i = currentRow; i<numberRowsInTable; i++ ) { theTable.rows[i].style.display = ''; } showPage(); preLink(); nextText(); firstLink(); } function hideTable() { for ( var i = ; i<numberRowsInTable; i++ ) { theTable.rows[i].style.display = 'none'; } } function showPage() { pageNum.innerHTML = page; } //总共页数 function pageCount() { var count = ; if ( numberRowsInTable%pageSize != ) count = ; 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 = ''; nextLink(); lastLink(); } hide(); </script> </body> </html>
以上内容是小编给大家介绍的JS代码实现table数据分页效果，希望对大家有所帮助，如果大家还有任何问题欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对查字典教程网的支持！
【JS代码实现table数据分页效果】相关文章：
★ Javascript实现div的toggle效果实例分析
★ 载入进度条 效果
★ JS代码混淆初步