Skip to content

Pagination Component

Rati Wannapanop edited this page Jul 30, 2016 · 4 revisions

vuetable comes with two vuetable-pagination components

  • vuetable-pagination (default), which is a sliding pagination. By default, it will render 5 sliding pages and navigation buttons for first page, previous page, next page, and last page. The number of sliding pages will also be even number with the current displayed page being in the center. The number of sliding pages can be configured via on-each-side prop and will be calculated using this formula.
    number of sliding pages = onEachSide * 2 +1
  • vuetable-pagination-dropdown, which does not take up much space as all the pages will put inside a dropdown for the user to select.

If you want, you can make your own pagination component to display how the pagination would look like and interact with the user. You can see a sample in Using vuetable with Twitter's Bootstrap section.

vuetable provides a VautablePaginationMixin to help creating custom pagination component an easy task. Please see the source code as it is very straight forward, but you will need some knowledge about Vue.js.