vue-paginate-search v1.0.1

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

Event