Friday, September 15, 2017

Pagination, Search and Filter

Often times developers will implement a pagination to reduce the number of results.  However, it is always important to remember that pagination must be coupled with a search feature.  Otherwise, people lose one of the best capabilities that is available when all the results are available.

Today, I will add code based on https://www.w3schools.com/howto/howto_js_filter_table.asp and https://ebay.gitbooks.io/mindpatterns/content/navigation/pagination.html .


This design includes the following:

  • A function is provided to filter given the row from the table and the filter string
  • A label is added after the pagination to show which results are being displayed
  • Query parameters allowed for a filter string, page number to display and results per page
  • Disabled or hidden pagination elements when not applicable
  • The current page is always in the middle of the pagination module
  • The table holds the source of truth for the page and resultsPerPage attributes
  • The input holds the source of truth for the filter string
  • 5 numbers and 2 arrows are allowed in the pagination module