<!DOCTYPE html>
<html>
<head>
<title>表格数据搜索和分页</title>
<style>
.pagination button {display: inline-block; padding: 8px 16px; text-decoration: none; cursor: pointer;}
.pagination button.active {background-color: black; color: white;}
</style>
</head>
<body>
<input type="text" id="searchInput" placeholder="请输入搜索关键字" style="height:38px; margin-bottom:10px;">
<table id="myTable" style="border-collapse:collapse; width:100%;">
<thead>
<tr>
<th style="border:1px solid black; padding: 8px; text-align:left;">ID</th>
<th style="border:1px solid black; padding: 8px; text-align:left;">姓名</th>
<th style="border:1px solid black; padding: 8px; text-align:left;">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:1px solid black; padding: 8px; text-align:left;">1</td>
<td style="border:1px solid black; padding: 8px; text-align:left;">张三</td>
<td style="border:1px solid black; padding: 8px; text-align:left;">20</td>
</tr>
</tbody>
</table>
<div class="paginations" id="paginations" style="margin-top:10px;"></div>
<script>
var table = document.getElementById("myTable");
var searchInput = document.getElementById("searchInput");
var rows = table.getElementsByTagName("tr");
var data = [];
var currentPage = 1;
var rowsPerPage = 20;
// 将表格数据存储到一个数组中
for (var i = 1; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
var rowData = [];
for (var j = 0; j < cells.length; j++) {
rowData.push(cells[j].textContent || cells[j].innerText);
}
data.push(rowData);
}
function searchAndPaginate() {
var keyword = searchInput.value.toLowerCase();
var filteredData = data.filter(function(row) {
return row.some(function(cell) {
return cell.toLowerCase().indexOf(keyword) > -1;
});
});
var startIndex = (currentPage - 1) * rowsPerPage;
var endIndex = startIndex + rowsPerPage;
var paginatedData = filteredData.slice(startIndex, endIndex);
for (var i = 0; i < data.length; i++) {
var row = rows[i+1];
var rowVisible = paginatedData.includes(data[i]);
row.style.display = rowVisible ? "" : "none";
}
renderPagination(filteredData.length);
}
function renderPagination(totalRows) {
var totalPages = Math.ceil(totalRows / rowsPerPage);
var pagination = document.getElementById("paginations");
pagination.innerHTML = "";
for (var i = 1; i <= totalPages; i++) {
var button = document.createElement("button");
button.textContent = i;
button.addEventListener("click", function() {
currentPage = parseInt(this.textContent);
searchAndPaginate();
});
if (i === currentPage) {
button.classList.add("active");
}
pagination.appendChild(button);
}
}
searchInput.addEventListener("input", function() {
currentPage = 1;
searchAndPaginate();
});
searchAndPaginate();
</script>
</body>
</html>
重要的事情说三遍!!!
这是网站预览，如果预览不正常，有可能需要外网才能访问，或网站已经不存在，或对方服务器拒绝预览访问。
这是网站预览，如果预览不正常，有可能需要外网才能访问，或网站已经不存在，或对方服务器拒绝预览访问。
这是网站预览，如果预览不正常，有可能需要外网才能访问，或网站已经不存在，或对方服务器拒绝预览访问。
（网址均来源于网络，如有侵权，请联系删除）
1. 链接直达将跳转网址： https://www.qaqlinks.com/sites/40.html
2. 网址收录时间：2023-11-04 16:24:10
3. 这是第“40”个收录网址。
如对此链接有任何疑问，可以添加以上微信，或此链接底部留言。看到会马上回复。
QaQlinks 跨境电商导航网站 声明：网站上的服务均为第三方提供，与 QAQlinks 网站无关。请用户注意甄别第三方服务质量，避免上当受骗。
（文章来源于网络，如有侵权，请联系删除）
图片横幅，通过拽动来实现展示