Pagination

<k-pagination
  align="center"
  :details="true"
  :page="5"
  :total="125"
  :limit="10" />

Props

align

String (default: "left")

The align prop makes it possible to move the pagination component to the left, center or right according to the wrapper component.

details

Boolean (default: false)

Show/Hide the details display with the page selector in the center of the two navigation buttons.

keys

Boolean (default: false)

Enable/disable keyboard navigation

limit

Number (default: 10)

Sets the limit of items to be shown per page

nextLabel

String (default: "Next")

Sets the label for the next arrow button

page

Number (default: 1)

Sets the current page

pageLabel

String (default: "Page")

Sets the label for the page selector

prevLabel

String (default: "Previous")

Sets the label for the prev arrow button

total

Number (default: 0)

Sets the total number of items that are in the paginated list. This has to be set higher to 0 to activate pagination.

Methods

goTo(page)

Jump to the given page

prev()

Jump to the previous page

next()

Jump to the next page

Events

paginate

Listening to the paginate event is the most straight forward way to react to the pagination component.

<template>
  <section>
    <h2>Paginated items</h2>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
    <k-pagination :total="total" @paginate="fetch" />
  </section>
</template>

<script>
export default {
  data() {
    total: 0,
    items: []
  },
  created() {
    this.fetch({ page: 1 });
  },
  methods: {
    fetch(pagination) {
      return this.$api
        .get('/projects.json', { page: pagination.page })
        .then(response => {
          this.items = response.data;
          this.total = response.total;
        });
    }
  }
};
</script>

CSS class

.k-pagination