vue-paginate-search

Installation

Package Managers

npm install vue-paginate-search

// import
 import paginate from "vue-paginate-search"

// register

export default {
    ...
    components: {paginate}
    ...
}

Example Usage

 <table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item, index) in dataPerPage" :key="index">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
        </tr>
    </tbody>
</table>

<pagination
    :config="config"
    :listData="listData"
    :searchData="search"
    @pageChange="data => (dataPerPage = data)"
/>

 //...
        data() {
            return {
                search: "",
                listData: [],
                dataPerPage: [],
                config: {
                    perPage: 10,
                    currentPage: 1
                    firstText: "first",
                    prevText: "prev",
                    firstAndLast: true
                    nextText: "next",
                    lastText: "last",
                    searchField: "name"
                }
            }
        }
//...

Component reference

Properties

Property	Type	Default Value
listData	Array
config	Object
perPage	Number	10
currentPage	Number	1
firstText	String	«
prevText	String	‹
firstAndLast	Boolean	false
nextText	String	›
lastText	String	»
searchField	String	first property of object

Event

Event	Arguments	Description
pageChange	Object - return data list per page	when the page changes by user interaction