<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格分页示例</title>
<style>
/* 基本样式 */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 8px 12px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f4f4f4;
}
/* 分页按钮样式 */
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ddd;
background-color: #f4f4f4;
cursor: pointer;
}
.pagination button.active {
background-color: #007bff;
color: white;
}
.pagination button.disabled {
background-color: #e0e0e0;
color: #a0a0a0;
cursor: not-allowed;
}
</style>
</head>
<body>
<div>
<table id="addTableDataList">
<thead>
<tr>
<th>Table 1 Data (imfr_ud_tableid)</th>
<th>Table 2 Data (imfr_ud_tableid)</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
<div id="pagination" class="pagination">
</div>
</div>
<script>
// 模拟从数据库中提取的数据
const table1Data = [
{imfr_ud_tableid: '1121312edsadas', imfr_ud_name: 'Name1'},
{imfr_ud_tableid: 'jjjj', imfr_ud_name: 'Name2'},
{imfr_ud_tableid: 'gge', imfr_ud_name: 'Name3'},
{imfr_ud_tableid: 'm10420ccc', imfr_ud_name: 'Name4'},
{imfr_ud_tableid: 'ooooo', imfr_ud_name: 'Name5'},
{imfr_ud_tableid: 'sssss', imfr_ud_name: 'Name6'},
{imfr_ud_tableid: '20240822', imfr_ud_name: 'Name7'},
{imfr_ud_tableid: '666666', imfr_ud_name: 'Name8'},
{imfr_ud_tableid: '0000000000', imfr_ud_name: 'Name9'},
{imfr_ud_tableid: '1111111111', imfr_ud_name: 'Name10'},
{imfr_ud_tableid: 'ExtraData1', imfr_ud_name: 'Name11'}
];
const table2Data = [
{imfr_ud_tableid: 'otherData1'},
{imfr_ud_tableid: 'otherData2'},
{imfr_ud_tableid: 'otherData3'},
{imfr_ud_tableid: 'otherData4'},
{imfr_ud_tableid: 'otherData5'},
{imfr_ud_tableid: 'otherData6'},
{imfr_ud_tableid: 'otherData7'},
{imfr_ud_tableid: 'otherData8'},
{imfr_ud_tableid: 'otherData9'},
{imfr_ud_tableid: 'otherData10'},
{imfr_ud_tableid: 'otherData11'}
];
let currentPage = 1;
const rowsPerPage = 10;
const totalPages = Math.ceil(table1Data.length / rowsPerPage);
function displayTableData(page) {
const tbody = document.getElementById('tableBody');
tbody.innerHTML = ""; // 清空表格内容
const start = (page - 1) * rowsPerPage;
const end = start + rowsPerPage;
const paginatedData1 = table1Data.slice(start, end);
const paginatedData2 = table2Data.slice(start, end);
for (let i = 0; i < paginatedData1.length; i++) {
const row = document.createElement('tr');
const cell1 = document.createElement('td');
const link = document.createElement('a');
link.href = `your_page.html?id=${paginatedData1[i].imfr_ud_tableid}`;
link.textContent = paginatedData1[i].imfr_ud_tableid;
cell1.appendChild(link);
row.appendChild(cell1);
const cell2 = document.createElement('td');
if (paginatedData2[i]) {
cell2.textContent = paginatedData2[i].imfr_ud_tableid;
} else {
cell2.textContent = 'N/A';
}
row.appendChild(cell2);
tbody.appendChild(row);
}
}
function setupPagination() {
const pagination = document.getElementById('pagination');
pagination.innerHTML = ''; // 清空分页内容
// 如果数据少于等于 rowsPerPage 条,则不显示分页
if (table1Data.length <= rowsPerPage) {
pagination.style.display = 'none';
return;
}
pagination.style.display = 'flex'; // 确保显示分页
// 添加“前一页”按钮
if (currentPage > 1) {
const prevBtn = document.createElement('button');
prevBtn.textContent = '前一页';
prevBtn.addEventListener('click', function () {
if (currentPage > 1) {
currentPage--;
displayTableData(currentPage);
setupPagination();
}
});
pagination.appendChild(prevBtn);
}
// 添加数字按钮
for (let i = 1; i <= totalPages; i++) {
const btn = document.createElement('button');
btn.textContent = i;
btn.className = i === currentPage ? 'active' : '';
btn.addEventListener('click', function () {
currentPage = i;
displayTableData(currentPage);
setupPagination(); // 重新设置分页按钮的状态
});
pagination.appendChild(btn);
}
// 添加“后一页”按钮
if (currentPage < totalPages) {
const nextBtn = document.createElement('button');
nextBtn.textContent = '后一页';
nextBtn.addEventListener('click', function () {
if (currentPage < totalPages) {
currentPage++;
displayTableData(currentPage);
setupPagination();
}
});
pagination.appendChild(nextBtn);
}
}
// 初始化页面
displayTableData(currentPage);
setupPagination();
</script>
</body>
</html>
表格分页怎么写
最新推荐文章于 2024-08-30 20:29:15 发布