-
Notifications
You must be signed in to change notification settings - Fork 303
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 viaon-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.
- Properties
- Fields Definition
- Special Field
- Callbacks
- Detail Row
- Events
- Data Format (JSON)
- Sorting, Paging, and Page Sizing of Data
- Appending Other Parameters to the Query String
- Sample Data Using Laravel
- Customize the Pagination Info
- Pagination Components
- CSS Styling
- Using vuetable with Twitter's Bootstrap
- Displaying a Loading Animation
- Extending vuetable Pagination Component