koalyptus / TableFilter

A Javascript library making HTML tables filterable and a bit more :)
https://www.tablefilter.com
MIT License
324 stars 95 forks source link

Support for pagination bars #790

Open daniel-tran opened 4 years ago

daniel-tran commented 4 years ago

Enhancement/feature description This feature request proposes an expansion of the pagination options for TableFilter to include pagination bars. The pagination bar would include individual buttons corresponding to other page numbers, as well as the existing arrow buttons for the first, previous, next and last pages. Possible settings for the pagination bar could include specifying a custom page "window size" (e.g. 5 = only shows 5 page numbers on the pagination bar at any given time) and a window update boundary (e.g. if the pagination bar shows 4, 5, 6, 7, 8 and the boundary is set to 3, viewing pages 6, 7 or 8 would cause the pagination bar to update with the next set of page numbers).

Steps which explain the enhancement/feature With reference to the image attached with this change request, under the assumption that the user is currently on page 1:

  1. User clicks on "2" and is taken to page 2 of the TableFilter results. The pagination bar does not update.
  2. User clicks on "5" and is taken to page 5 of the TableFilter results. The user also notices that the pagination bar has updated with different available page numbers (e.g. 3, 4, 5, 6, 7)
  3. User clicks on "6" and is taken to page 6 of the TableFilter results. The pagination bar updates again (e.g. 4, 5, 6, 7, 8).
  4. User clicks on the first page button and is taken back to page 1 of the TableFilter results. The pagination bar resets to its original set of page numbers (e.g. 1, 2, 3, 4, 5)

Why would the enhancement be useful to most users At the moment, TableFilter only supports pagination as a text box or drop-down list. It might be helpful to expand the pagination options in case these current options are not viable for a particular use case (e.g. mobile support for certain screen sizes).

Screenshots and GIFs General pagination bars

Additional context Perhaps this feature has already been considered in the past, in which any links to discussed workarounds or feature decisions (e.g. "Pagination bars won't be implemented because...") would be helpful.

Describe alternatives you've considered One alternative is to have custom client-side JavaScript that converts the drop-down list into a pagination bar, as well as logic to create a changing "window size" when navigating to certain pages. However, this could be problematic if the drop-down list ever becomes an unsupported pagination option.

koalyptus commented 3 years ago

Tx @daniel-tran for your detailed enhancement issue. Please note TableFilter pagination currently exposes an API that allows to implement custom pagination, this is a naive example: https://codepen.io/koalyptus/pen/jOrLywZ

Cheers, Max