jquery动态怎么实现表格分页
发布网友
发布时间：2022-04-23 17:30
共2个回答
懂视网
时间：2022-05-13 04:45
求高手给个简单明了的写法.
回复讨论(解决方案)
给你个思路，不是 覆盖 而是 先把每个表头对应 好的表身 都写出来，然后 当点击 第一个表头的时候 其他的表身增加隐藏样式，同理 点击第二个表头的时候 移除隐藏样式 其他的表身增加隐藏样式。
一般都是先删除原有内容再将新页面的内容append上去。当然表头可以保留的，只更换内容就行了。
一般都是先删除原有内容再将新页面的内容append上去。当然表头可以保留的，只更换内容就行了。
请问大侠怎么写 ?具体的语句.......表头保留,是不是用th而不是tr?
给你个思路，不是 覆盖 而是 先把每个表头对应 好的表身 都写出来，然后 当点击 第一个表头的时候 其他的表身增加隐藏样式，同理 点击第二个表头的时候 移除隐藏样式 其他的表身增加隐藏样式。
为什么会有其他表头,总共就一个表啊. ajax分页啊.......大哥...........ajax新内容覆盖旧内容......
热心网友
时间：2022-05-13 01:53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</table>
<table id="result">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<div id="barcon"></div>
<script>
window.onload = function () {
goPage(1)
}
function goPage(pno) {
var itable = document.getElementById("result");
var num = itable.rows.length; //表格所有行数(所有记录数)
console.log(num);
var totalPage = 0; //总页数
var pageSize = 3; //每页显示行数
//总共分几页
if (num / pageSize > parseInt(num / pageSize)) {
totalPage = parseInt(num / pageSize) + 1;
} else {
totalPage = parseInt(num / pageSize);
}
var currentPage = pno; //当前页数
var startRow = (currentPage - 1) * pageSize + 1; //开始显示的行 31
var endRow = currentPage * pageSize; //结束显示的行 40
endRow = (endRow > num) ? num : endRow; //40
//遍历显示数据实现分页
for (var i = 1; i < (num + 1); i++) {
var irow = itable.rows[i - 1];
if (i >= startRow && i <= endRow) {
irow.style.display = "table-row";
} else {
irow.style.display = "none";
}
}
var pageEnd = document.getElementById("pageEnd");
var tempStr = "<span>共" + totalPage + "页</span>";
if (currentPage > 1) {
tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (1) + ")\">首页</span>";
tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (currentPage - 1) + ")\">上一页</span>"
} else {
tempStr += "<span class='btn spanbtn'>首页</span>";
tempStr += "<span class='btn spanbtn'>上一页</span>";
}
if (totalPage == 1) {
tempStr += "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" + currentPage +
"</span></a>"
} else if (totalPage == 2 && currentPage == 1) {
tempStr += "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn pageicon nowpage'>" + currentPage +
"</span></a>" + "<a onclick=\"goPage(" + (currentPage + 1) + ")\"><span class='spanbtn pageicon'>" +
(currentPage + 1) + "</span></a>"
} else if (totalPage == 2 && currentPage == 2) {
tempStr += "<a onclick=\"goPage(" + (currentPage - 1) + ")\"><span class='spanbtn pageicon'>" + (currentPage -
1) + "</span></a>" + "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" +
currentPage + "</span></a>"
} else if (totalPage >= 3 && currentPage == 1) {
tempStr += "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" + currentPage +
"</span></a>" + "<a onclick=\"goPage(" + (currentPage + 1) + ")\"><span class='spanbtn pageicon'>" +
(currentPage + 1) +
"</span></a>" + "<a onclick=\"goPage(" + (currentPage + 2) + ")\"><span class='spanbtn pageicon'>" + (
currentPage + 2) +
"</span></a>"
} else if (totalPage >= 3 && currentPage == totalPage) {
tempStr += "<a onclick=\"goPage(" + (currentPage - 2) + ")\"><span class='spanbtn pageicon'>" + (currentPage -
2) +
"</span></a>" + "<a onclick=\"goPage(" + (currentPage - 1) + ")\"><span class='spanbtn pageicon'>" +
(currentPage - 1) +
"</span></a>" + "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" +
currentPage +
"</span></a>"
} else {
tempStr += "<a onclick=\"goPage(" + (currentPage - 1) + ")\"><span class='spanbtn pageicon'>" + (currentPage -
1) +
"</span></a>" + "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" +
currentPage +
"</span></a>" + "<a onclick=\"goPage(" + (currentPage + 1) + ")\"><span class='spanbtn pageicon'>" + (
currentPage + 1) +
"</span></a>"
}
if (currentPage < totalPage) {
tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (currentPage + 1) + ")\">下一页</span>";
tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (totalPage) + ")\">尾页</span>";
} else {
tempStr += "<span class='btn spanbtn'>下一页</span>";
tempStr += "<span class='btn spanbtn'>尾页</span>";
}
document.getElementById("barcon").innerHTML = tempStr;
}
</script>
</body>
</html>
自己修改一下table中元素的CSS样式，分页页码的样式，就能看出来效果了
