第一個：實現的很常見很簡單的顯示頁數翻頁
效果圖：
•這是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 class="page"></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 style="width:px;margin: auto;"><table class="tablebox" 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 style="height:px;margin:px ;"><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數據分頁效果，希望對大家有所幫助，如果大家還有任何問題歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
