| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <!-- 动态分页控制 -->
- <div class="pagination">
- <!-- 上一页按钮 -->
- <a href="<%= pageUri(uri, page - 1 == 0 ? 1 : page - 1)%>" class="page-btn" <%= page === 1 ? 'style="pointer-events: none; opacity: 0.5;"' : '' %>>
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- </a>
-
- <!-- 分页数字按钮 -->
- <%
- // 计算总页数
- const totalPages = Math.ceil(recordsFiltered / length);
-
- // 设置显示的页码范围(当前页前后各2页)
- let startPage = Math.max(1, page - 2);
- let endPage = Math.min(totalPages, startPage + 4);
-
- // 调整起始页以确保显示5个页码
- if (endPage - startPage < 4) {
- startPage = Math.max(1, endPage - 4);
- }
-
- // 显示第一页和省略号(如果需要)
- if (startPage > 1) { %>
- <a href="<%= pageUri(uri, 1)%>" class="page-btn"><%= 1 %></a>
- <% if (startPage > 2) { %>
- <span class="page-btn" style="background: none; cursor: default;">...</span>
- <% } %>
- <% }
-
- // 显示页码范围
- for (let i = startPage; i <= endPage; i++) { %>
- <a href="<%= pageUri(uri, i)%>" class="page-btn <%= i === page ? 'active' : '' %>"><%= i %></a>
- <% }
-
- // 显示最后一页和省略号(如果需要)
- if (endPage < totalPages) {
- if (endPage < totalPages - 1) { %>
- <span class="page-btn" style="background: none; cursor: default;">...</span>
- <% } %>
- <a href="<%= pageUri(uri, totalPages)%>" class="page-btn"><%= totalPages %></a>
- <% } %>
-
- <!-- 下一页按钮 -->
- <a href="<%= pageUri(uri, page + 1 > totalPages ? totalPages : page + 1)%>" class="page-btn" <%= page === totalPages ? 'style="pointer-events: none; opacity: 0.5;"' : '' %>>
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- </a>
- </div>
|