JS代碼實現table數據分頁效果
編輯：關於JavaScript
第一個：實現的很常見很簡單的顯示頁數翻頁
效果圖：
•這是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數據分頁效果，希望對大家有所幫助，如果大家還有任何問題歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對網站的支持！
小編推薦
熱門推薦