coryd.dev-eleventy/src/posts/2024/enhancing-pagination-with-a-page-selector.md

date	title	description	tags
2024-04-05T10:00-08:00	Enhancing pagination with a page selector	I've made a change to my site's pagination wherein I've enhanced the page count displayed at the bottom of my home and links pages to display the page count in a select element. The select displays a list of all the pages and navigates to the selected page.	Eleventy development javascript

I've made a change to my site's pagination wherein I've enhanced the page count displayed at the bottom of my home and links pages to display the page count in a select element. The select displays a list of all the pages and navigates to the selected page.

If a user does not have JavaScript enabled, it simply renders the old static page count. The JavaScript logic looks like the following:

window.onload = () => {
  const pagination = document.getElementById('pagination')
  const uri = window.location.pathname
  const urlSegments = uri.split('/').filter(segment => segment !== '')
  let pageNumber = parseInt(urlSegments[urlSegments.length - 1]) || 0
  pagination.querySelector(`option[value="${pageNumber.toString()}"]`).setAttribute('selected', 'selected')

  if (pagination) {
    pagination.addEventListener('change', (event) => {
      pageNumber = event.target.value

      if (urlSegments.length === 0 || isNaN(urlSegments[urlSegments.length - 1])) {
        urlSegments.push(pageNumber.toString())
      } else {
        urlSegments[urlSegments.length - 1] = pageNumber.toString()
      }

      if (pageNumber === 0) {
        window.location.href = `${window.location.protocol}//${window.location.host}/`
      } else {
        window.location = `${window.location.protocol}//${window.location.host}/${urlSegments.join('/')}`
      }
    })
  }
}

We wait for the document to load, select the pagination DOM node, get the current pathname, split it at '/' delimited segments, filter empty values and look for a number representing the current page. We then set the selected attribute on the appropriate <option> node for the current page.

Within the change event listener I check whether we've extracted a url segment and that the last segment is a valid number — if not, we add a new numeric segment. If it is numeric, we replace it with the new page number. Finally, we have special handling for the root section — because my first page is at / and the second is at /1/ we need to correctly navigate the user should the pageNumber be 0.

With that, we have quicker and more convenient page navigation for users that have JavaScript enabled and a handy page count for users that have disabled JavaScript in their browser.

{% render "partials/banners/npm.liquid", url: 'https://www.npmjs.com/package/@cdransf/select-pagination', command: 'npm i @cdransf/select-pagination' %}