javascript - .ejs 模板中的 Bootstrap 分页

Question

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

代码如下:

<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:是否有添加省略号或其他 chop 分页的好方法？我想我可以显示十页并用单页推进器将其书挡和书挡以显示下一页/前十页。我不完全确定如何做到这一点。了解 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 现在包含 Bootstrap 的分页 HTML。只需将它作为参数传递给 ejs 模板并渲染它:

<%- paginationHtml %>

这一个类轮将为您提供以下内容:

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