From dfbdc6f9c4b26f88c33c67cb0a7508bed9902032 Mon Sep 17 00:00:00 2001 From: unknown <1371033826@qq.com> Date: Sun, 26 Oct 2025 22:09:37 +0800 Subject: [PATCH] add-tinydb-page --- ejs/tinydb.ejs | 108 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 106 insertions(+), 2 deletions(-) diff --git a/ejs/tinydb.ejs b/ejs/tinydb.ejs index dd1d0de..3454aac 100644 --- a/ejs/tinydb.ejs +++ b/ejs/tinydb.ejs @@ -75,6 +75,14 @@ .new-row input, .new-row textarea { border: 1px solid #c1e6c1; } + .pagination { + margin-bottom: 0; + } + .page-info { + display: flex; + align-items: center; + margin-right: 15px; + } @@ -205,6 +213,17 @@ + +
+
+ 显示第 0 到 0 条，共 0 条记录 +
+ +
@@ -277,6 +296,8 @@ $(document).ready(function() { // 全局变量 let currentData = []; + let currentPage = 1; + const itemsPerPage = 10; // 从localStorage获取用户信息 function getUserInfo() { @@ -389,13 +410,15 @@ secret: userInfo.secret, action: 'search', no: 1, - count: 100, + count: 1000, // 获取更多数据用于分页 type: 'both' }, success: function(response) { if (response.status === 'success') { currentData = response.data; + currentPage = 1; // 重置到第一页 renderDataTable(currentData); + updatePagination(); } else { showAlert('加载数据失败: ' + response.message, 'error'); } @@ -416,7 +439,12 @@ return; } - data.forEach(item => { + // 计算当前页的数据 + const startIndex = (currentPage - 1) * itemsPerPage; + const endIndex = Math.min(startIndex + itemsPerPage, data.length); + const pageData = data.slice(startIndex, endIndex); + + pageData.forEach(item => { const row = $(''); row.append($('').text(item.tag)); row.append($('').text(item.value)); @@ -429,6 +457,11 @@ tbody.append(row); }); + // 更新分页信息显示 + $('#startItem').text(startIndex + 1); + $('#endItem').text(endIndex); + $('#totalItems').text(data.length); + // 绑定编辑按钮事件 $('.edit-btn').on('click', function() { const tag = $(this).data('tag'); @@ -512,6 +545,75 @@ }); } + // 更新分页控件 + function updatePagination() { + const totalPages = Math.ceil(currentData.length / itemsPerPage); + const pagination = $('#pagination'); + pagination.empty(); + + // 上一页按钮 + const prevLi = $('
  • ').addClass(currentPage === 1 ? 'disabled' : ''); + const prevLink = $('') + .append($('
  • ').addClass(i === currentPage ? 'active' : ''); + const pageLink = $('').text(i); + + if (i !== currentPage) { + pageLink.on('click', function(e) { + e.preventDefault(); + currentPage = i; + renderDataTable(currentData); + updatePagination(); + }); + } + + pageLi.append(pageLink); + pagination.append(pageLi); + } + + // 下一页按钮 + const nextLi = $('
  • ').addClass(currentPage === totalPages ? 'disabled' : ''); + const nextLink = $('') + .append($('