140 lines
4.5 KiB
Plaintext
140 lines
4.5 KiB
Plaintext
<%
|
|
// 分页组件参数
|
|
// currentPage: 当前页码
|
|
// totalPages: 总页数
|
|
// baseUrl: 基础URL
|
|
// query: 查询参数对象
|
|
%>
|
|
|
|
|
|
<div class="pagination-wrapper">
|
|
<nav aria-label="分页导航">
|
|
<ul class="pagination justify-content-center">
|
|
<!-- 上一页 -->
|
|
<% if (currentPage > 1) { %>
|
|
<li class="page-item">
|
|
<a class="page-link" href="<%= baseUrl %>?page=<%= currentPage - 1 %><%= query ? '&' + Object.keys(query).map(key => key + '=' + query[key]).join('&') : '' %>" aria-label="上一页">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
<% } else { %>
|
|
<li class="page-item disabled">
|
|
<span class="page-link" aria-label="上一页">
|
|
<span aria-hidden="true">«</span>
|
|
</span>
|
|
</li>
|
|
<% } %>
|
|
|
|
<!-- 页码 -->
|
|
<%
|
|
let startPage = Math.max(1, currentPage - 2);
|
|
let endPage = Math.min(totalPages, currentPage + 2);
|
|
|
|
// 确保显示5个页码
|
|
if (endPage - startPage < 4) {
|
|
if (startPage === 1) {
|
|
endPage = Math.min(totalPages, startPage + 4);
|
|
} else {
|
|
startPage = Math.max(1, endPage - 4);
|
|
}
|
|
}
|
|
%>
|
|
|
|
<!-- 第一页 -->
|
|
<% if (startPage > 1) { %>
|
|
<li class="page-item">
|
|
<a class="page-link" href="<%= baseUrl %>?page=1<%= query ? '&' + Object.keys(query).map(key => key + '=' + query[key]).join('&') : '' %>">1</a>
|
|
</li>
|
|
<% if (startPage > 2) { %>
|
|
<li class="page-item disabled">
|
|
<span class="page-link">...</span>
|
|
</li>
|
|
<% } %>
|
|
<% } %>
|
|
|
|
<!-- 中间页码 -->
|
|
<% for (let i = startPage; i <= endPage; i++) { %>
|
|
<% if (i === currentPage) { %>
|
|
<li class="page-item active">
|
|
<span class="page-link"><%= i %></span>
|
|
</li>
|
|
<% } else { %>
|
|
<li class="page-item">
|
|
<a class="page-link" href="<%= baseUrl %>?page=<%= i %><%= query ? '&' + Object.keys(query).map(key => key + '=' + query[key]).join('&') : '' %>"><%= i %></a>
|
|
</li>
|
|
<% } %>
|
|
<% } %>
|
|
|
|
<!-- 最后一页 -->
|
|
<% if (endPage < totalPages) { %>
|
|
<% if (endPage < totalPages - 1) { %>
|
|
<li class="page-item disabled">
|
|
<span class="page-link">...</span>
|
|
</li>
|
|
<% } %>
|
|
<li class="page-item">
|
|
<a class="page-link" href="<%= baseUrl %>?page=<%= totalPages %><%= query ? '&' + Object.keys(query).map(key => key + '=' + query[key]).join('&') : '' %>"><%= totalPages %></a>
|
|
</li>
|
|
<% } %>
|
|
|
|
<!-- 下一页 -->
|
|
<% if (currentPage < totalPages) { %>
|
|
<li class="page-item">
|
|
<a class="page-link" href="<%= baseUrl %>?page=<%= currentPage + 1 %><%= query ? '&' + Object.keys(query).map(key => key + '=' + query[key]).join('&') : '' %>" aria-label="下一页">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
<% } else { %>
|
|
<li class="page-item disabled">
|
|
<span class="page-link" aria-label="下一页">
|
|
<span aria-hidden="true">»</span>
|
|
</span>
|
|
</li>
|
|
<% } %>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- 分页信息 -->
|
|
<div class="pagination-info text-center text-muted mt-2">
|
|
第 <%= currentPage %> 页，共 <%= totalPages %> 页
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.pagination-wrapper {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.pagination {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.page-link {
|
|
color: #3498db;
|
|
border-color: #dee2e6;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.page-link:hover {
|
|
color: #2980b9;
|
|
background-color: #f8f9fa;
|
|
border-color: #3498db;
|
|
}
|
|
|
|
.page-item.active .page-link {
|
|
background-color: #3498db;
|
|
border-color: #3498db;
|
|
color: white;
|
|
}
|
|
|
|
.page-item.disabled .page-link {
|
|
color: #6c757d;
|
|
background-color: #fff;
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-size: 14px;
|
|
}
|
|
</style>
|