1. l-pagination

l-pagination

pagination

Demo Pagination-Plugin

Properties

Property Type Default Required Description
totalPage Number True Total number of rows in the dataset
perPage Number True Number of rows per page
initialPage Number True Number of rows initial page
pills Boolean False False Applies pill styling to the pagination buttons
size String md False Size of the rendered buttons
pageRange Number 3 False Range of pages which displayed
breakText String ... False Text for the break view indicator
marginPage Number 2 False The number of displayed pages for margins

Vue

 data() {
    return {
            currentPage: 1,
            perPage: 3,
            totalPage: 0,
            pills: false,
            size: "md",
            pageRange: 3,
            marginPages: 2,
            breakText: "...",
        };
},
methods: {
    changePage(page) {
        this.currentPage = page;
    }
}

Props

     <Pagination
      :totalPage="totalPage"
      :perPage="perPage"
      :initialPage="currentPage"
      @changePage="changePage"
      :pills="pills"
      :size="size"
      :pageRange="pageRange"
      :breakText="breakText"
      :marginPages="marginPages"
    />

Emit

 <Pagination @changePage="changePage"/>

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.