feat: 统计卡片改一行显示+列表上方增加翻页
This commit is contained in:
@@ -1491,46 +1491,21 @@ INDEX_TEMPLATE = '''
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 统计卡片 -->
|
<!-- 统计信息（一行显示） -->
|
||||||
<div class="row mb-4" id="statsCards">
|
<div class="d-flex gap-3 mb-3 align-items-center" id="statsCards">
|
||||||
<div class="col-md-3">
|
<span class="badge bg-primary fs-6">总条目: <span id="statTotal">0</span></span>
|
||||||
<div class="card bg-primary text-white">
|
<span class="badge bg-warning text-dark fs-6">待处理: <span id="statPending">0</span></span>
|
||||||
<div class="card-body">
|
<span class="badge bg-info fs-6">进行中: <span id="statProgress">0</span></span>
|
||||||
<h6>总条目</h6>
|
<span class="badge bg-success fs-6">已完成: <span id="statCompleted">0</span></span>
|
||||||
<h3 id="statTotal">0</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="card bg-warning text-dark">
|
|
||||||
<div class="card-body">
|
|
||||||
<h6>待处理</h6>
|
|
||||||
<h3 id="statPending">0</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="card bg-info text-white">
|
|
||||||
<div class="card-body">
|
|
||||||
<h6>进行中</h6>
|
|
||||||
<h3 id="statProgress">0</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="card bg-success text-white">
|
|
||||||
<div class="card-body">
|
|
||||||
<h6>已完成</h6>
|
|
||||||
<h3 id="statCompleted">0</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 列表上方翻页 -->
|
||||||
|
<div id="paginationTop" class="d-flex justify-content-between align-items-center mb-2"></div>
|
||||||
|
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
<div id="itemList"></div>
|
<div id="itemList"></div>
|
||||||
|
|
||||||
<!-- 分页 -->
|
<!-- 列表下方翻页 -->
|
||||||
<div id="pagination" class="d-flex justify-content-center mt-3"></div>
|
<div id="pagination" class="d-flex justify-content-center mt-3"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -2689,16 +2664,60 @@ function renderItems(items) {
|
|||||||
`}).join('');
|
`}).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 渲染分页
|
// 渲染分页（顶部和底部）
|
||||||
function renderPagination(total, page) {
|
function renderPagination(total, page) {
|
||||||
const container = document.getElementById('pagination');
|
const containerBottom = document.getElementById('pagination');
|
||||||
|
const containerTop = document.getElementById('paginationTop');
|
||||||
const totalPages = Math.ceil(total / pageSize);
|
const totalPages = Math.ceil(total / pageSize);
|
||||||
|
|
||||||
|
// 清空顶部容器
|
||||||
|
if (containerTop) containerTop.innerHTML = '';
|
||||||
|
|
||||||
if (totalPages <= 1) {
|
if (totalPages <= 1) {
|
||||||
container.innerHTML = '';
|
containerBottom.innerHTML = '';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 顶部：显示总数 + 简洁翻页
|
||||||
|
if (containerTop) {
|
||||||
|
let topHtml = `<span class="text-muted small">共 ${total} 条，第 ${page}/${totalPages} 页</span>`;
|
||||||
|
topHtml += '<nav><ul class="pagination pagination-sm mb-0">';
|
||||||
|
|
||||||
|
// 上一页
|
||||||
|
topHtml += `<li class="page-item ${page === 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" href="#" onclick="loadItems(${page-1}); return false;">«</a>
|
||||||
|
</li>`;
|
||||||
|
|
||||||
|
// 页码（最多显示3个）
|
||||||
|
const topStartPage = Math.max(1, page - 1);
|
||||||
|
const topEndPage = Math.min(totalPages, page + 1);
|
||||||
|
|
||||||
|
if (topStartPage > 1) {
|
||||||
|
topHtml += `<li class="page-item"><a class="page-link" href="#" onclick="loadItems(1); return false;">1</a></li>`;
|
||||||
|
if (topStartPage > 2) topHtml += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let p = topStartPage; p <= topEndPage; p++) {
|
||||||
|
topHtml += `<li class="page-item ${p === page ? 'active' : ''}">
|
||||||
|
<a class="page-link" href="#" onclick="loadItems(${p}); return false;">${p}</a>
|
||||||
|
</li>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topEndPage < totalPages) {
|
||||||
|
if (topEndPage < totalPages - 1) topHtml += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
|
||||||
|
topHtml += `<li class="page-item"><a class="page-link" href="#" onclick="loadItems(${totalPages}); return false;">${totalPages}</a></li>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下一页
|
||||||
|
topHtml += `<li class="page-item ${page === totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" href="#" onclick="loadItems(${page+1}); return false;">»</a>
|
||||||
|
</li>`;
|
||||||
|
|
||||||
|
topHtml += '</ul></nav>';
|
||||||
|
containerTop.innerHTML = topHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部：完整翻页
|
||||||
let html = '<nav><ul class="pagination">';
|
let html = '<nav><ul class="pagination">';
|
||||||
|
|
||||||
// 上一页
|
// 上一页
|
||||||
@@ -2732,7 +2751,7 @@ function renderPagination(total, page) {
|
|||||||
</li>`;
|
</li>`;
|
||||||
|
|
||||||
html += '</ul></nav>';
|
html += '</ul></nav>';
|
||||||
container.innerHTML = html;
|
containerBottom.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 显示模式：single（单行）或 double（双行）
|
// 显示模式：single（单行）或 double（双行）
|
||||||
|
|||||||
Reference in New Issue
Block a user