<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1px solid rgb(172, 166, 166);
margin: 100px auto;
}
td,th{
height: 50px;
width: 50px;
text-align: center;
}
thead tr{
border-bottom: 1px solid rgb(175, 171, 171);
}
button{
margin-left: 400px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr>
<td>eee</td>
<td>eee</td>
<td>eee</td>
</tr>
<tr>
<td>fff</td>
<td>ff</td>
<td>eee</td>
</tr>
</tbody>
</table>
<button class="s">上一页</button>
<button class="x">下一页</button>
<script>
// pno表示跳转的页面
getPage4(1, 5);
function getPage4(pno, psize) {
let item = document.querySelector('table tbody')
console.log(item);
// 计算行数
let rows = item.rows.length;
console.log(rows);
// 计算需要分为多少页
let pages = (rows / psize) > parseInt(rows / psize) ? (parseInt(rows / psize) + 1) : parseInt(rows / psize);
// 当前显示数据的第一个和最后一个
let starRow = (pno - 1) * psize + 1;
let endRow = pno * psize > rows ? rows : pno * psize;
// 遍历 如果数据在当前页就显示
for (let i = 1; i < item.rows.length + 1; i++) {
if (i >= starRow && i <= endRow) {
item.rows[i - 1].style.display = "table-row";
} else {
item.rows[i - 1].style.display = "none";
}
}
// 获取按钮
let pagebtnx = document.querySelector('.x')
let pagebtns = document.querySelector('.s')
pagebtnx.addEventListener('click', function () {
pno++;
getPage4(pno, 5)
})
pagebtns.addEventListener('click', function () {
console.log('a');
pno--;
getPage4(pno, 5)
})
}
</script>
</body>
</html>
JS分页。
最新推荐文章于 2024-08-27 13:38:21 发布