JS代码实现table数据分页效果

前端技术 2023/09/02 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数据分页效果，希望对大家有所帮助，如果大家还有任何问题欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/3931

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案