artsite/views/pagination.ejs

<link rel="stylesheet" href="/stylesheets/pagination.css">
<%
// 计算总页数
const totalPages = Math.ceil(recordsFiltered / length);

// 确定前后展示的页码范围
const startPage = Math.max(1, page - 3); // 前面至少展示2个页码（包括当前页的前一页）
const endPage = Math.min(totalPages, page + 5 - (page % 5 === 0 ? 0 : 1)); // 后面展示页码数根据当前页是否为5的倍数来调整，确保总展示数为5（前面）+1（后面）或6（无省略号时）
const showEllipsis = totalPages > 6 && (startPage > 1 || endPage < totalPages); // 判断是否需要显示省略号
%>

<div class="pagination">
    <span style="font-size: 15px; font-family:sans-serif; margin-right: 20px;"><%= translate.total[lang] %> <%= recordsFiltered %> <%= translate.item[lang] %>,  <%= length %><%= translate.item[lang] %>/<%= translate.page[lang] %></span>
    <ul>
        <% for (let i = startPage; i <= endPage; i++) { %>
        <li class="<%= i === page ? 'active' : '' %>"><a href="<%= uri %><%= uri.includes('?')? '&' : '?' %>page=<%= i %>&length=<%= length %>" class="<%= i === page ? 'active' : '' %>"> <%= i %> </a></li>
        <% } %>
        <% if (showEllipsis) { %>
        <li class="ellipsis">...</li>
        <% } %>
        <% if (endPage < totalPages) { %>
        <li><a href="<%= uri %>page=<%= totalPages %>&length=<%= length %>"><%= totalPages %></a></li>
        <% } %>
    </ul>
    <input type="number" id="pageInput" min="1" max="<%= totalPages %>">
    <button onclick="jumpToPage()"><%= translate.jumpTo[lang] %></button>
</div>

<script>
  function jumpToPage() {
    var pageInput = document.getElementById('pageInput');
    var page = parseInt(pageInput.value, 10);
    var totalPages = '<%= totalPages %>'; // 从EJS模板中获取的总页数
    if (!isNaN(page) && page > 0 && page <= totalPages) {
        window.location.href = `<%= uri %><%= uri.includes('?')? '&' : '?' %>page=${page}&length=<%= length %>`
    } else {
        alert('<%= translate.wrongPage[lang] %> :（1-<%= totalPages %>）');
    }
  }
</script>