中的引导分页。ejs模板

Question

我有一个带有一些简单管理界面的节点项目。一个页面显示用户列表，它使用引导分页器分页，当有几千个用户时，分页看起来像

以下是代码：

<nav>
<div class="text-center">
    <ul class="pagination pagination-sm">
        <li
                <% if(page <= 0) { %>
                class="disabled"
                <% } %>
        ><a href="?page=<%= page <= 0 ? 0 : page - 1 %>">&laquo;</a></li>
        <% for(var i = 0; i < pages; i++) { %>
        <li
                <% if(page == i) { %>
                class="active"
                <% } %>
        ><a href="?page=<%= i %>"><%= i + 1 %></a></li>
        <% } %>
        <li <% if(page > pages - 1) { %>class="disabled"
                <% } %>
        ><a href="?page=<%= page > pages - 1 ? parseInt(pages) : 1 + parseInt(page) %>">&raquo;</a></li>
    </ul>
</div>

我不是一个喜欢html的人。以下是我的问题：

1：href是如何实现的？page=n工作？什么是 做什么？我假设某个地方有逻辑指示浏览器显示新页面，但我不确定在哪里。

2：有没有添加省略号或其他截断页码的好方法？我想我可以显示十页，然后用单页推进器将其装订起来，然后用一些东西来显示下一页/前十页。我不完全确定如何做到这一点。了解href的工作原理会有所帮助。

谢谢




Answer 1

分页库减轻了您实际实现分页的大部分负担。您只需计算三个变量：总计项目数、每页项目数和当前页数。

var totalItems, itemsPerPage, pageNum;
// calculate the data for above variables and pass them in below method

var pagination = paginate.page(totalItems, itemsPerPage, pageNum);
var paginationHtml = pagination.render({ baseUrl: '/' }); //the link to pass to href, page number will be added as query paramtere to it e.g. /?page=6

page inationHtml现在包含引导的分页超文本标记语言。只需将其作为参数传递给ejs模板并呈现它：

<%- paginationHtml %>

这一行将为您提供以下信息：

您可以通过修改用于分页的引导类来更改样式（如示例屏幕截图所示）。