I have a node project with some simple admin interfaces. One page shows a list of users, it's paginated with a bootstrap paginator and when there's several thousand users the pagination looks like

Here's the code:

<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>

I'm not an html person. Here are my questions:

1: How does the href ?page=n work? What's the ? do? I assume there's logic somewhere that directs the browser to show the new page but I'm not sure where.

2: Is there a good way to add an ellipsis or some other truncated pagination? I suppose I can show ten pages and bookend it with the single page advancers and bookend that with something to show the next/previous ten pages. I'm not entirely sure how to make that happen. Understanding how the href works would help.

Thanks!

I have a node project with some simple admin interfaces. One page shows a list of users, it's paginated with a bootstrap paginator and when there's several thousand users the pagination looks like

Here's the code:

<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>

I'm not an html person. Here are my questions:

1: How does the href ?page=n work? What's the ? do? I assume there's logic somewhere that directs the browser to show the new page but I'm not sure where.

2: Is there a good way to add an ellipsis or some other truncated pagination? I suppose I can show ten pages and bookend it with the single page advancers and bookend that with something to show the next/previous ten pages. I'm not entirely sure how to make that happen. Understanding how the href works would help.

Thanks!

• javascript
• html
• node.js
• twitter-bootstrap
• pagination

1 Answer 1

Paginate library takes most of the heavy burden of actually implementing pagination off you. You simply need to calculate three variables: Number of totals items, items per page, and current page number.

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 now contains the bootstrap's pagination HTML. Simply pass it as parameter to ejs template and render it:

<%- paginationHtml %>

This one liner will give you the following:

You can change the styling by modifying bootstrap classes for pagination (as done in the example screenshots).