欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS代碼實現(xiàn)table數(shù)據(jù)分頁效果

 更新時間：2016年05月26日 16:51:38   作者：嗑瓜子兒gf  
這篇文章主要介紹了JS代碼實現(xiàn)table數(shù)據(jù)分頁效果的相關(guān)資料,非常不錯，代碼簡答易懂，非常實用，需要的朋友可以參考下

第一個：實現(xiàn)的很常見很簡單的顯示頁數(shù)翻頁

　　　　　效果圖：

•這是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=;//設(shè)置當(dāng)前頁默認(rèn)值為
var pageSize=;//設(shè)置每一頁要顯示的數(shù)目
$table.bind('paging', function () {
$table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+)*pageSize).show();
//先將tbody中所有的行隱藏，再通過slice結(jié)合當(dāng)前頁數(shù)和頁面顯示的數(shù)目展現(xiàn)數(shù)據(jù)
});
var sumRows=$table.find('tbody tr').length;//獲取數(shù)據(jù)總行數(shù)
var sumPages=Math.ceil(sumRows/pageSize);//得到總頁數(shù)
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");
//為每一個要顯示的頁數(shù)上添加觸發(fā)分頁函數(shù)
}).appendTo($pager);
$pager.append(" ");
}
$pager.insertAfter($table);
$table.trigger("paging");
});

第二個：實現(xiàn)前進(jìn)頁和后退頁

　　　　　　效果圖：

•這是全部代碼，用得原生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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr><tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr><tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr><tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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;
}
//總共頁數(shù)
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>

以上內(nèi)容是小編給大家介紹的JS代碼實現(xiàn)table數(shù)據(jù)分頁效果，希望對大家有所幫助，如果大家還有任何問題歡迎給我留言，小編會及時回復(fù)大家的，在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論