Pagination ​

<template>
  <BContainer>
    <BRow>
      <BCol>
        <div class="overflow-auto">
          <b-pagination
            v-model="currentPage"
            :total-rows="rows"
            :per-page="perPage"
            aria-controls="my-table"
          />

          <p class="mt-3">Current Page: {{ currentPage }}</p>

          <b-table
            id="my-table"
            :items="items"
            :per-page="perPage"
            :current-page="currentPage"
            small
          /></div
      ></BCol>
    </BRow>
  </BContainer>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'

const perPage = ref(3)
const currentPage = ref(1)
const items = ref([
  {id: 1, first_name: 'Fred', last_name: 'Flintstone'},
  {id: 2, first_name: 'Wilma', last_name: 'Flintstone'},
  {id: 3, first_name: 'Barney', last_name: 'Rubble'},
  {id: 4, first_name: 'Betty', last_name: 'Rubble'},
  {id: 5, first_name: 'Pebbles', last_name: 'Flintstone'},
  {id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble'},
  {id: 7, first_name: 'The Great', last_name: 'Gazzoo'},
  {id: 8, first_name: 'Rockhead', last_name: 'Slate'},
  {id: 9, first_name: 'Pearl', last_name: 'Slaghoople'},
])
const rows = computed(() => items.value.length)
</script>

<template>
  <!-- Use text in props -->
  <BPagination
    v-model="currentPage"
    :total-rows="rows"
    :per-page="perPage"
    first-text="First"
    prev-text="Prev"
    next-text="Next"
    last-text="Last"
  />

  <!-- Use emojis in props -->
  <BPagination
    v-model="currentPage"
    :total-rows="rows"
    :per-page="perPage"
    first-text="⏮"
    prev-text="⏪"
    next-text="⏩"
    last-text="⏭"
    class="mt-4"
  />

  <!-- Use HTML and sub-components in slots -->
  <BPagination v-model="currentPage" :total-rows="rows" :per-page="perPage" class="mt-4">
    <template #first-text><span class="text-success">First</span></template>
    <template #prev-text><span class="text-danger">Prev</span></template>
    <template #next-text><span class="text-warning">Next</span></template>
    <template #last-text><span class="text-info">Last</span></template>
    <template #ellipsis-text>
      <BSpinner small type="grow" />
      <BSpinner small type="grow" />
      <BSpinner small type="grow" />
    </template>
    <template #page="{page, active}">
      <b v-if="active">{{ page }}</b>
      <i v-else>{{ page }}</i>
    </template>
  </BPagination>
  Current page : {{ currentPage }}
</template>

<script setup lang="ts">
import {ref} from 'vue'

const currentPage = ref(1)
const perPage = ref(10)
const rows = ref(100)
</script>

<template>
  <h6>Goto first button number</h6>
  <BPagination v-model="currentPage" :total-rows="rows" :per-page="perPage" first-number />

  <h6>Goto last button number</h6>
  <BPagination v-model="currentPage" :total-rows="rows" :per-page="perPage" last-number />

  <h6>Goto first and last button number</h6>
  <BPagination
    v-model="currentPage"
    :total-rows="rows"
    :per-page="perPage"
    first-number
    last-number
  />
</template>

<script setup lang="ts">
import {ref} from 'vue'

const currentPage = ref(5)
const perPage = ref(1)
const rows = ref(100)
</script>

<template>
  <h6>Small</h6>
  <BPagination v-model="currentPage" :total-rows="rows" size="sm" />

  <h6>Default</h6>
  <BPagination v-model="currentPage" :total-rows="rows" />

  <h6>Large</h6>
  <BPagination v-model="currentPage" :total-rows="rows" size="lg" />
</template>

<script setup lang="ts">
import {ref} from 'vue'

const currentPage = ref(1)
const rows = ref(100)
</script>

<template>
  <h6>Small Pills</h6>
  <BPagination v-model="currentPage" pills :total-rows="rows" size="sm" />

  <h6>Default Pills</h6>
  <BPagination v-model="currentPage" pills :total-rows="rows" />

  <h6>Large Pills</h6>
  <BPagination v-model="currentPage" pills :total-rows="rows" size="lg" />
</template>

<script setup lang="ts">
import {ref} from 'vue'

const currentPage = ref(1)
const rows = ref(100)
</script>

<template>
  <div>
    <h6>Left alignment (default)</h6>
    <BPagination v-model="currentPage" :total-rows="rows" />
  </div>
  <div class="mt-3">
    <h6 class="text-center">Center alignment</h6>
    <BPagination v-model="currentPage" :total-rows="rows" align="center" />
  </div>
  <div class="mt-3">
    <h6 class="text-end">Right (end) alignment</h6>
    <BPagination v-model="currentPage" :total-rows="rows" align="end" />
  </div>
  <div class="mt-3">
    <h6 class="text-center">Fill alignment</h6>
    <BPagination v-model="currentPage" :total-rows="rows" align="fill" />
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'

const currentPage = ref(1)
const rows = ref(100)
</script>