Blog

Page indicator with Buffalo

On Sunday, Jul 14, 2019
post image
software-development go buffalo Development

Buffalo already ships with very cool pagination support, more than that it even uses the pagination when we generate resources, which is awesome.

I’ve been working lately in a project that uses that pagination (again thanks to the buffalo team), but this app also has a page indicator on the left side, as the following image shows:

resource image

Yes, i’m talking about the section that says “Displaying 1 - 25 of 120 Policies” (design typo there).

So my first thought was computing those variables on the action and then passing these to the view, where i would use them to build my “page indicator” section.

My action was turning very ugly, until i realized most (not to say all) that i needed was already contained in the pagination context variable set in my action: 


q := tx.PaginateFromParams(c.Params())
…
c.Set("pagination", q.Paginator)

Which is an instance of pops paginator! wow! i already had:

  • Page
  • PerPage
  • Offset
  • TotalEntriesSize
  • CurrentEntriesSize

With that in hand building my page indicator was not very hard, but wanted to share my _page-indicator.html partial just so if anyone needs to do something similar this could be a good starting point.


<div class="pagination-label">
    <span class="opacity">Displaying <%= pagination.Offset + 1 %> - <%= pagination.Offset + pagination.CurrentEntriesSize %> of <%= pagination.TotalEntriesSize %> <%= plural %></span>
    <i class="per-page-separator">|</i>
    <span class="per-page-<%= perPage(per_page) %>">
        <a href="<%= basePath %>?per_page=25"><i class="opacity per-page-25-number per-page-option">25</i></a>
        <a href="<%= basePath %>?per_page=50"><i class="opacity per-page-50-number per-page-option">50</i></a>
        <a href="<%= basePath %>?per_page=100"><i class="opacity per-page-100-number per-page-option"> 100</i></a>
        <i class="opacity"><%= plural %> per page.</i>
    </span>
</div>

The way i use this partial from my table templates is:


<%= partial("partials/page-indicator.html", {plural: "Cats", basePath: catsPath({humanSlug: currentHuman.Slug})}) %>

As i’ve said it was very easy with the help of the Paginator that the Buffalo team created for us, hope this helps you if you’re needing to create a page indicator in your app.

Share this post: