JS代码实现table数据分页效果第⼀个：实现的很常见很简单的显⽰页数翻页
效果图：
•这是HTML代码，很简单滴（我好像看到了被嫌弃的⼩眼神）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-">
<script src="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 il(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"];
$igger("paging");
//为每⼀个要显⽰的页数上添加触发分页函数
}).appendTo($pager);
$pager.append(" ");
}
$pager.insertAfter($table);
$igger("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 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>
<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 = ElementById("table");
var totalPage = ElementById("spanTotalPage"); var pageNum = ElementById("spanPageNum"); var spanPre = ElementById("spanPre");
var spanNext = ElementById("spanNext");
var spanFirst = ElementById("spanFirst");
var spanLast = ElementById("spanLast");
var numberRowsInTable = ws.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++ ) {
}
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++ ) {
}
if ( maxRow == ) {
preText();
firstText();
}
showPage();
nextLink();
lastLink();
}
//第⼀页
function first() {
hideTable();
page = ;
for ( var i = ; i<pageSize; i++ ) {
}
showPage();
preText();
}
//最后⼀页
function last() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - );
for ( var i = currentRow; i<numberRowsInTable; i++ ) {
}
showPage();
preLink();
nextText();
firstLink();
}
function hideTable() {
for ( var i = ; i<numberRowsInTable; i++ ) {tabletotal函数
}
}
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++ ) {
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '';
nextLink();
lastLink();
}
hide();
</script>
</body>
</html>
以上内容是⼩编给⼤家介绍的JS代码实现table数据分页效果，希望对⼤家有所帮助，如果⼤家还有任何问题欢迎给我留⾔，⼩编会及时回复⼤家的，在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论