A reactive object for working with paged data in Vue.

Installation

npm i @vbarbarosh/vue-pager

Codepen

https://codepen.io/vbarbarosh/pen/xxRMaaz?editors=1000

YouTube

Usage

The goal of this package is to provide a reactive object to any paged data. Technically, this object is nothing more than a thin wrapper around async fn function. This function will be called each time a paged data is requested.

The following reactive properties are provided: limit, offset, total, and items for items. page_active, page_total, and page_numbers for pages.

Usage • Step 1: Create fn function

// http://www.filltext.com/?rows=100&fname={firstName}&lname={lastName}&tel={phone|format}&address={streetAddress}&city={city}&state={usState|abbr}&zip={zip}&pretty=true
const api_articles_query_db = Array(100).fill(0).map(function (v, i) {
    return {
        uid: i + 1,
        author: `${faker.name.firstName()} ${faker.name.lastName()}`,
        title: faker.lorem.sentence(),
    };
});

function api_articles_query(query)
{
    const limit = Math.max(0, +query.limit || 10);
    const offset = Math.max(0, +query.offset || 0);
    const total = api_articles_query_db.length;
    const items = api_articles_query_db.slice(offset, offset + limit);
    const ms = faker.random.number({min: 100, max: 500});
    return Promise.delay(ms).return({limit, offset, total, items});
}

Usage • Step 2: Create pager object

import Vue from 'vue';
import vue_pager from '@vbarbarosh/vue-pager';

new Vue({
    el: '#app',
    data: {
        pager: vue_pager(api_articles_query),
    },
});

Usage • Step 3: Create html

<ul>
    <li v-for="item in pager.items" v-bind:key="item.uid">
        {{ item.title }}
    </li>
</ul>
<button v-on:click="pager.prev" v-bind:disabled="!pager.has_prev">prev</button>
<button v-on:click="pager.next" v-bind:disabled="!pager.has_next">next</button>
<div v-if="pager.is_loading">Loading...</div>
<div v-if="pager.error">{{ error }}</div>

Props

| Name | Type | Description | --- | :--- | :--- | response | object | A return value of fn | error | any | Will be set to value other than null in case of error | is_loading | boolean | Will be set to true while fn is executed. | items | array | response.items | limit | number | response.limit | offset | number | response.offset | total | number | Total number of items reported by fn (the same as response.total) | page_active | number | Current page | page_total | number | Total number of pages | page_numbers | array | An array of page numbers (e.g. [1,2,3,4,5]) | has_prev | boolean | true if page_active > 1 | has_next | boolean | true if page_active < page_total | can_goto(page_no) | Function | true if page_no >= 1 && page_no <= page_total | prev() | Function | Navigate to the previous page | next() | Function | Navigate to the next page | goto(page_no) | Function | Go to the specified page | rewind() | Function | Reset offset and fetch very first page | reload() | Function | Fetch current page again | promise_loaded() | Function | Returns a promise which would be resolved after is_loading=false;

Edge case • Wait until pager received first response

new Vue({
    data: function () {
        return {
            pager: null,
        };
    },
    created: async function () {
        this.pager = vue_pager(api_pages_list);
        await this.pager.promise_loaded();
    },
});

Related

• https://github.com/bramus/js-pagination-sequence