flex-pagination v1.0.1

Flex Pagination

Vue.js 2.0^ powerful but simple pagination component which is fully customizable and easy to use. Check flex pagination documentation for more examples.

Installation

npm install flex-pagination

Basic example

Flex pagination requires :pagination="" property which must be of type object and have 2 child properties. page type (int) which is current active page;
total type (int) which is total amount of pages;

<flex-pagination :pagination="pagination"></flex-pagination>

pagination: { 
    page: 10, 
    total: 50 
}

Ranges

Optional property :range="" is defining how many page are shown around current page which are set to 5 by default.
before type (int) number of pages before current;
after type (int) number of pages after current;

NOTE: Ranges was pulled out of configuration because of its frequent usage.

<flex-pagination :pagination="pagination" :range="range"></flex-pagination>

range: { 
    before: 3, 
    after: 0 
}

Hide elements

show property of the :config=" object defines which visual elements must be hide or show.
first, prev, next, last type (boolean) default True;

<flex-pagination :pagination="pagination" :config="config"></flex-pagination>

config: { 
    show: { 
        first: false, 
        last: false, 
        next: true, 
        prev: false
    }
}

Events

Each time you navigate on pagination an event is emitted. By default event name is 'flexp:page'. You can define a custom event name using config event property. event type (string) default 'flexp:page';

NOTE: The event handler is receiving selected page number in the first parameter.

<flex-pagination :pagination="pagination" :v-on:my:custom:event="myEventHandler" :config="config">

data: { 
    currentPageContent: '',
    pagination: {
        page: 10,

        // NOTE: total pages will be updated after "request" result. 
        // For demonstration purpose, a random number will be taken in between 40 and 50.
        total: 44 
    },
    config: {
        event: 'my:custom:event'
    },
}
methods: { 
    myEventHandler(pageNumber) {
        let self = this;
        self.makeRequest(pageNumber).then(function(response){
            self.currentPageContent = response.data;
        });
    }
}

Hide elements

Each time you navigate on pagination an event is emitted. By default event name is 'flexp:page'. You can define a custom event name using config event property. event type (string) default 'flexp:page';

NOTE: The event handler is receiving selected page number in the first parameter.

Customization

Check flex pagination documentation for more examples.