HUGO

Pagination not working with .Reverse

@jmooring, Pagination Reverse Date Order - Massively Theme

{{ $dir := "reports"}}
    
    <div class="[ x--wide ]">
      {{ $paginator := .Paginate (where .Data.Pages "Section" "reports") }}
      <ul class="[ loop ] [ mb--2 ]">
        {{ range $paginator.Pages.ByTitle.Reverse }}
        <li class="[ loop__item ] [ flex--between flex--wrap p--1 mb--050 ]">
          <div>
            <h3 class="[ h5 mb--025 ]"><a href="{{ .Permalink }}">COVID-19 Case Report {{ .Title }}</a></h3>
            <p>{{ .Date | dateFormat "Monday, Jan 2, 2006" }}</p>
          </div>
          <div>
            <a href="{{ .Permalink }}index.json">View JSON</a>
          </div>
        </li>
        {{ end }}
      </ul>
  

Posts are titled 515-560. Default pagination works fine and follows the numbering sequence, but .Reverse changes the order, but it doesn’t start the listing on the first page from 560, just changes the order of the posts on the page — ie. 515-545 becomes 545-515, 548-557 becomes 557-548.

What I’m looking for is a descending pattern as you progress throughout the paginated pages.

@jmooring, here’s the link to the repository: GitHub - jsphpndr/covid-api-bahamas: This repository was created for COVID-19 data in The Bahamas.

@jmooring, you can see how it looks on the frontend here: COVID-19 Case Reports | COVID-19 API | Bahamas

You are invoking pagination three times on the same page:

Don’t do that. See:
https://gohugo.io/templates/pagination/#list-paginator-pages

If you call .Paginator or .Paginate multiple times on the same page, you should ensure all the calls are identical. Once either .Paginator or .Paginate is called while generating a page, its result is cached, and any subsequent similar call will reuse the cached result. This means that any such calls which do not match the first one will not behave as written.

After you clean that up, make sure you set the sort order before you paginate.

@jmooring, was using this tutorial: How to build custom Hugo pagination - Glenn McComb: front end developer and designer

I will work to reduce the calls and get back to you.

@jmooring, you are a gem.

For anyone else who needs the answer, it’s as follows:

  {{ $paged := (where .Data.Pages.ByTitle.Reverse "Section" "reports") }}
  {{ $paginator := .Paginate $paged }}

Thanks a million, Joe.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.