.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:有没有添加省略号或其他截断分页的好方法？我想我可以显示10页，并用单页前进器加书签，然后用显示下一页/前10页的内容加书签。我不完全确定如何做到这一点。理解href是如何工作的将会有所帮助。

谢谢!

Answer 1

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

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

paginationHtml现在包含引导程序的分页HTML。只需将其作为参数传递给ejs模板并呈现：

<%- paginationHtml %>

这一条将为您提供以下内容：

​

​

​

​

​

​

​

​

​

​

您可以通过修改用于分页的bootstrap类来更改样式(如示例截图所示)。