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 |