# v-pagy

**Repository Path**: mirrors_trandaison/v-pagy

## Basic Information

- **Project Name**: v-pagy
- **Description**: A lightweight and customizeable Bootstrap Pagination for Vue 
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-27
- **Last Updated**: 2025-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# v-pagy

Server-side paging component in vue, template based on bootstrap

- Vue.js (tested with 2.x)
- Bootstrap CSS (tested with 4.x)

## Installation
```sh
npm install v-pagy
```
or via yarn
```sh
yarn add v-pagy
```

## Example
```vue
<template lang="html">
  <pagination
    :total="total"
    :page-size="pageSize"
    :current-page="page"
    :options="options"
    @page-change="onPageChangedHandler"
    @refresh-page="onRefreshPageHandler"
    nav-class="padding-10"
    ul-class="bg-color-red"
    li-class="txt-color-blue"
  />
</template>

<script>
import pagination from 'v-pagy';

export default {
  components: {
    pagination,
  },
  props: {
    page: Number,
  },
  data() {
    return {
      total: 1000,
      pageSize: 20,
      options: { // Optional
        offset: 2,
        previousText: 'Prev',
        nextText: 'Next',
        alwaysShowPrevNext: true,
      },
    },
  },
  methods: {
    onPageChangedHandler(page) {
      console.log(page);
      // Exec your response to server passing 'page' params as clicked button paging
    },
    onRefreshPageHandler(page) {
      console.log(page);
      // Exec your response to server passing 'page' params as clicked on current active paging button
    },
  },
});
</script>
```

If you want to use HTML content for the first, last, previous and next button, there is some named slots. Here is an example:

```html
<pagination
  :total="total"
  :page-size="pageSize"
  :current-page="page"
  :options="options"
  @page-change="onPageChangedHandler"
  @refresh-page="onRefreshPageHandler"
  nav-class="padding-10"
  ul-class="bg-color-red"
  li-class="txt-color-blue"
>
  <template slot="first-el">
    <span title="go first">◄◄</span>
  </template>
  <template slot="last-el">
    <span title="go last">►►</span>
  </template>
</pagination>
```

### Events
| Event name | Arg Type | Description |
|---|---|---|
| `page-change` | `number` | Fire on click to the page link (except for the current one) |
| `refresh-page` | `number` | Fire on click to the current page link |

### props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| `total` | Number | Yes |  | Total items from server side |
| `pageSize` | Number | Yes |  | Number of items per page |
| `callback` | Function | Yes |  | The callback to be called on page changes |
| `currentPage` | Number |  | 1 | The current page from the URL params |
| `options` | Object |  |  | Configurations |
| `navClass` | String |  | `''` | Class will be include in nav element |
| `ulClass` | String |  | `''` | Class will be include in ul element |
| `liClass` | String |  | `''` | Class will be include in all li element |

### options
| Name | Type | Default | Description |
|---|---|---|---|
| `offset` | Number | 2 | Left and right offset of pagination numbers to display |
| `ariaNext` | String | `'Next'` | Change default aria next text |
| `ariaPrevious` | String | `'Previous'` | Change default aria previous text |
| `ariaLast` | String | `'Last'` | Change default aria last text |
| `ariaFirst` | String | `'First'` | Change default aria first text |
| `previousText` | String | `'‹'` | Change default previous button text |
| `nextText` | String | `'›'` | Change default next button text |
| `firstText` | String | `'«'` | Change default first button text |
| `lastText` | String | `'»'` | Change default last button text |
| `alwaysShowPrevNext` | Boolean | `true` | Show the prev/next button even if on the first/last page |
| `alwaysShowFirstLast` | Boolean | `true` | Show first/last button even if on first/last page |
| `first` | Boolean | `true` | Set `false` to hide the first button |
| `last` | Boolean | `true` | Set `false` to hide the last button |
| `prev` | Boolean | `true` | Set `false` to hide the previous button |
| `next` | Boolean | `true` | Set `false` to hide the next button |

### slots
Useful in case you want to custom the UI of the first, last, previous and next buttons by HTML elements instead of using a text.

| Name | Description |
|---|---|
| `first-el` | Custom slot for the first link |
| `prev-el` | Custom slot for the previous link |
| `next-el` | Custom slot for the next link |
| `last-el` | Custom slot for the last link |