Pagination Package

[pelevesque]

I created a pagination package which makes it easier to create pagination links.

https://github.com/pelevesque-node/paginate

Try it out, and give it a star!

---

The pagination method in Lucid is great, but it doesn’t give us the power to create our pagination links with super ease.

I created a small NPM module that helps with this. It’s general, so could work without Adonis.

How to Use?

In your controller, something like this:

const paginator = require('@pelevesque/paginate')
const currentPage = 3
const perPage = 10
let users = await User.query().paginate(currentPage, perPage)
users = users.toJSON()
const numLinks = 10 // number of page link boxes we want
const url = 'http://www.myamazinginglylucrativesite.com/users?page='

const paginate = paginator(numLinks, currentPage, perPage, users.total, url)

return view.render('users', {
  users: users.data,
  paginate: paginate
})

In your view:

@if(paginate.numLinks)
  <nav class="pagination">
    @if(paginate.firstPage === paginate.currentPage)
      <span>&#x23EE;</span>
    @else
      <span>
          <a href="{{ paginate.url }}{{ paginate.firstPage }}">&#x23EE;</a>
      </span>
    @endif
    @each(link in paginate.links)
      @if(link.active)
        <span>{{ link.page }}</span>
      @else
        <span>
            <a href="{{ link.url }}">{{ link.page }}</a>
        </span>
      @endif
    @endeach
    @if(paginate.lastPage === paginate.currentPage)
      <span>&#x23ED;</span>
    @else
      <span>
          <a href="{{ paginate.url }}{{ paginate.lastPage }}">&#x23ED;</a>
      </span>
    @endif
  </nav>
@endif

[thetutlage]

Great! Is it for v4 or v5?

[pelevesque]

The package itself is not coupled to AdonisJs in any way. It's a pagination package that can be used with any system.

The integration example I wrote in the message above was done in Adonis v4 I think. I haven't tested it in v5.

[thetutlage]

Makes sense. Coz in v5, we return similar response by default

[pelevesque]

I guess my package is superfluous for v5 then. Good to know it was made native.