前端分页实现数据更新保持页码原位
问题分析
数据量少时使用的前端分页,前端分页遇到的问题是保存后重新加载数据时，没有保持当前页码。
需要让它在保存成功后保持当前页
saveBtn.addEventListener('click', async (e) => { e.stopPropagation(); const isSyncSelect = row.querySelector('.is-sync select'); const updatedDevice = { sensorDataId: device.sensorDataId, deviceName: row.querySelector('.device-name input')?.value || row.querySelector('.device-name').textContent, sensorName: row.querySelector('.sensor-name input')?.value || row.querySelector('.sensor-name').textContent, deviceNum: row.querySelector('.device-num input')?.value || row.querySelector('.device-num').textContent, newDeviceId: row.querySelector('.new-device-id input')?.value || row.querySelector('.new-device-id').textContent, projectName: row.querySelector('.project-name select')?.value || row.querySelector('.project-name').textContent, deviceType: row.querySelector('.device-type select')?.value || row.querySelector('.device-type').textContent, multiValue: row.querySelector('.multi-value select')?.value === '' ? null : row.querySelector('.multi-value select')?.value || row.querySelector('.multi-value').textContent, value: row.querySelector('.value input')?.value || row.querySelector('.value').textContent, isSyc: isSyncSelect?.value === '' ? null : isSyncSelect?.value }; try { const response = await fetch('/deviceSensorData', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(updatedDevice) }); if (!response.ok) { throw new Error('Failed to update device data'); }; // 重新加载整个表格数据以确保显示最新数据，并保持当前页码 const projectName = updatedDevice.projectName; if (projectName && typeof allDeviceData !== 'undefined') { // 重新获取最新数据 const deviceData = await fetchDeviceData(projectName); allDeviceData = deviceData || []; // 更新全局数据 // 计算最大页码，防止删除数据后当前页超出范围 totalPages = Math.ceil(allDeviceData.length / pageSize) || 1; if (currentPage > totalPages) { currentPage = totalPages; } // 刷新当前页显示 displayPagedData(); } alert('设备信息更新成功'); } catch (error) { console.error('更新设备数据时发生错误:', error); alert('更新设备数据失败'); } });同时，也需要修改删除按钮的逻辑
deleteBtn.addEventListener('click', async (e) => { e.stopPropagation(); if (confirm('确定要删除此设备数据吗？')) { try { const response = await fetch('/deleteDeviceSensorData', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sensorDataId: device.sensorDataId }) }); if (!response.ok) { throw new Error('Failed to delete device data'); }; // 重新加载数据并保持当前页码 const projectName = device.projectName; if (projectName && typeof allDeviceData !== 'undefined') { const deviceData = await fetchDeviceData(projectName); allDeviceData = deviceData || []; // 重新计算总页数 totalPages = Math.ceil(allDeviceData.length / pageSize) || 1; if (currentPage > totalPages) { currentPage = totalPages; } displayPagedData(); } alert('设备数据删除成功'); } catch (error) { console.error('删除设备数据时发生错误:', error); alert('删除设备数据失败'); } } });✅ 实现的功能：
保存/删除后保持当前页码：不会跳回第一页
自动调整页码：如果删除数据后总页数减少，会自动跳转到最后一页
刷新最新数据：从后端重新获取数据，确保显示最新内容
📝 关键改动：
利用 allDeviceData、currentPage、pageSize、totalPages 这些全局变量
保存/删除后重新调用 displayPagedData() 刷新当前页
添加边界检查，防止页码超出范围
实现方式详解
使用的是前端分页 + 全局状态保持的方式实现的
前端分页一次性从后端获取所有数据，在前端进行分页展示
// 全局变量存储所有数据和分页状态 let allDeviceData = []; // 存储所有设备数据 let currentPage = 1; // 当前页码 let pageSize = 10; // 每页显示条数 let totalPages = 0; // 总页数工作流程:
后端返回全部100条数据 → 前端根据pageSize切片 → 只显示当前页的10条
核心函数
① displayPagedData() - 分页显示
function displayPagedData() { const start = (currentPage - 1) * pageSize; // 起始索引 const end = start + pageSize; // 结束索引 const pageData = allDeviceData.slice(start, end); // 截取当前页数据 populateDeviceTable(pageData); // 渲染表格 updatePaginationInfo(); // 更新分页信息 }示例：
当前第3页，每页10条
start = (3-1) * 10 = 20
end = 20 + 10 = 30
取 allDeviceData[20..30] 这10条数据显示
② goToPage() - 跳转页面
function goToPage(page) { if (page < 1 || page > totalPages) return; // 边界检查 currentPage = page; // 更新当前页码 displayPagedData(); // 重新显示 }保存后保持页码的关键
// 保存成功后 const deviceData = await fetchDeviceData(projectName); allDeviceData = deviceData || []; // ① 更新全局数据 // ② 重新计算总页数（防止删除后页数减少） totalPages = Math.ceil(allDeviceData.length / pageSize) || 1; if (currentPage > totalPages) { currentPage = totalPages; // 调整到最后一页 } // ③ 刷新当前页（不改变currentPage的值） displayPagedData();关键点：
✅ 不重置 currentPage（保持原值）
✅ 只更新 allDeviceData（新数据）
✅ 重新切片 显示当前页数据
与后端对比
完整流程图
优势
用户体验好：操作后不会跳回第一页
性能好：小数据量下无需频繁请求后端
实现简单：不需要后端修改接口
自动容错：删除数据后自动调整页码
如果你的数据量不大（几百条），这种方案是最合适的