JS代碼實(shí)現(xiàn)table數(shù)據(jù)分頁效果
更新時(shí)間：2016年05月26日 16:51:38 作者：嗑瓜子兒gf
這篇文章主要介紹了JS代碼實(shí)現(xiàn)table數(shù)據(jù)分頁效果的相關(guān)資料,非常不錯(cuò)，代碼簡答易懂，非常實(shí)用，需要的朋友可以參考下
第一個(gè)：實(shí)現(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>編號(hào)</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');//獲取表格對(duì)象
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");
//為每一個(gè)要顯示的頁數(shù)上添加觸發(fā)分頁函數(shù)
}).appendTo($pager);
$pager.append(" ");
}
$pager.insertAfter($table);
$table.trigger("paging");
});
第二個(gè)：實(shí)現(xiàn)前進(jìn)頁和后退頁
效果圖：
•這是全部代碼，用得原生JS，依然還是很簡單滴（好像對(duì)原生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;
}
//總共頁數(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代碼實(shí)現(xiàn)table數(shù)據(jù)分頁效果，希望對(duì)大家有所幫助，如果大家還有任何問題歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jsp頁面數(shù)據(jù)分頁模仿百度分頁效果(實(shí)例講解)
- nodejs個(gè)人博客開發(fā)第六步 數(shù)據(jù)分頁
- JSP數(shù)據(jù)分頁導(dǎo)出下載顯示進(jìn)度條樣式
- jsp+servlet+javabean實(shí)現(xiàn)數(shù)據(jù)分頁方法完整實(shí)例
- 無JS,完全php面向過程數(shù)據(jù)分頁實(shí)現(xiàn)代碼
- JSP數(shù)據(jù)庫操數(shù)據(jù)分頁顯示
- jquery+json實(shí)現(xiàn)數(shù)據(jù)列表分頁示例代碼
- js前臺(tái)分頁顯示后端JAVA數(shù)據(jù)響應(yīng)
- JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁效果)
- js對(duì)象實(shí)現(xiàn)數(shù)據(jù)分頁效果
相關(guān)文章
利用Ext Js生成動(dòng)態(tài)樹實(shí)例代碼
今天在公司幫同事寫了個(gè)用Ext Js生成動(dòng)態(tài)樹的Demo，在這里分享一下，也好供以后自己查閱。2008-09-09
最近在用uniapp開發(fā)的時(shí)候遇到了一些問題,下面這篇文章主要給大家介紹了關(guān)于uniapp獲取底部安全距離以及狀態(tài)欄高度等的相關(guān)資料,需要的朋友可以參考下2022-10-10
ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??)
這篇文章主要介紹了ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
關(guān)于javascript 回調(diào)函數(shù)中變量作用域的討論
關(guān)于回調(diào)函數(shù)中變量作用域的討論精品推薦，大家可以參考下。2009-09-09
TypeScript 中如何限制對(duì)象鍵名的取值范圍
TypeScript由微軟開發(fā)的自由和開源的編程語言，是一種給 JavaScript 添加特性的語言擴(kuò)展，接下來通過本文給大家介紹TypeScript 中如何限制對(duì)象鍵名的取值范圍，感興趣的朋友跟隨小編一起看看吧2021-05-05
基于JavaScript實(shí)現(xiàn)的插入排序算法分析
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)的插入排序算法,結(jié)合實(shí)例形式詳細(xì)分析了插入排序的原理、操作步驟及javascript相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2017-04-04
js實(shí)現(xiàn)人才網(wǎng)站職位選擇功能的方法
這篇文章主要介紹了js實(shí)現(xiàn)人才網(wǎng)站職位選擇功能的方法,涉及javascript動(dòng)態(tài)操作頁面元素結(jié)點(diǎn)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Javascript實(shí)現(xiàn)視頻輪播在pc端與移動(dòng)端均可
用Javascript實(shí)現(xiàn)視頻輪播，畢竟是客戶的需求嗎？所以盡量實(shí)現(xiàn)下,下面有個(gè)實(shí)現(xiàn)視頻輪播的示例，pc端與移動(dòng)端均可以實(shí)現(xiàn)，感興趣的朋友可以了解下2013-09-09
javascript實(shí)現(xiàn)的仿51job地址多項(xiàng)選擇方式效果
分享一個(gè)類似51job方式的地址選擇效果2009-12-12