@vbarbarosh/vue-pager

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