@shafkat/vue3-pagination NPM

vue3-pagination

A vue3 component to create a server side pagination system
This pagination supports configuring the number of data show per page and search/filter system.
Getting Started

These instructions will help you to install the package on your local machine and create a server side pagination system in a minute.

Installation

installation process is very simple:

$ cd VUE3PROJECT
$ npm i @shafkat/vue3-pagination

Usage

Import the component

$ import { Pagination } from "@shafkat/vue3-pagination";

Use the component

$ <Pagination url="your_api_server_url"></Pagination>

API

Props

Name	Type	Default	Details
url	String	NULL	Required - Server url from where data will be fetched
filters	Object	{}	Optional - Send all your search options here as a json data
per-page	Number	20	Optional - This determines how many items will be shown per page
default-page-no	Number	1	Optional - First loaded page number
first-button-text	String	First	Optional - To change the text of first button. Html format allowed
last-button-text	String	Last	Optional - To change the text of last button. Html format allowed
next-button-text	String	'>>'	Optional - To change the text of next button. Html format allowed
prev-button-text	String	'<<'	Optional - To change the text of previous button. Html format allowed
class-name	String	NULL	Optional - This is the wrapper class. You can use this to change the design
headers	Object	{}	Optional - additional headers.
post-data	Object	{}	Optional - additional data.
loader-start	Function	null	Optional - This function will call when server api called started.
loader-end	Function	null	Optional - This function will call when server api called completed.

Events

Name	Type	Default	Details
update	method	NULL	Required - This function will be called upon successful fetching data

Example:

<script setup lang="ts">
    import { ref } from 'vue';
    import { Pagination } from "@shafkat/vue3-pagination";
    const url = ref('http://your-api-server-url');
    const className = 'my-pagination'; {/*optional to modify design*/}
    const items = ref([]);
    const filters = ref({ // optional. You can implement search/filter this way
        param1: 'value1',
        param2: 'value2'
    });
    const update = (res) => {
        console.log(res);
        items.value = res.items;
    }
    const headers = {'tokane': 'your-token-here', 'other-header': 'other-header-value'};
    const postData = {'param1': 'value1', 'param2': 'value2'};
</script>

<template>
    <table class="table">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr v-for="item in items">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
    <Pagination :url="url" :class-name="className" :filters="filters" @update="update"></Pagination>
</template>

<style>
    .my-pagination .page-link{
        background-color: #2c3e50;
        color: white;
    }
    .my-pagination .page-link:hover{
        opacity: .8;
    }
    .my-pagination .active .page-link{
        background-color: white;
        color: #2c3e50;
    }
</style>

include bootstrap >= 5.0 for styling
include fontawesome for icons

Response data from server

Name	Default value	Description
total_items	0	Required - Total number of items should be returned from server. to increase peformance you can do the count query only when you get 0 for this parameter value as a request
items*	{}	Required - Return all pages data from the server. You can rename it according to your choice.

If present, the request will be delayed by the given amount of time

Example:

{
  "total_items": 3,
  "items": [
    {
      "name": "A", "age": 20
    },{
      "name": "B", "age": 25
    },{
      "name": "C", "age": 30
    }
  ]
}