.ejs 模板中的引导分页答案

【问题标题】：Bootstrap pagination in .ejs template.ejs 模板中的引导分页
【发布时间】：2016-12-30 09:51:28
【问题描述】：

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

代码如下：

<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 的工作原理会有所帮助。

谢谢！

【问题讨论】：

标签： javascript html node.js twitter-bootstrap pagination

【解决方案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 %>

这一个班轮将为您提供以下内容：

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

【讨论】：