Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ractive-paginator with all npm packages installed. Try it out:

var ractivePaginator = require("ractive-paginator")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ractive-paginator v0.3.0

Simple and easy pagination component for ractivejs

#ractive-paginator

An easy to use Ractive component that handles pagination.

Demo

Live Demo

Install

npm install ractive-paginator --save

Usage

Add the component to your Ractive instance:

Ractive.extend({
    ...
    components: {
        paginator: require('ractive-paginator')
    },
    ...
});

Use it

<paginator items='{{things}}'>
    <div class='thing'>
        {{.}}
    </div>
</paginator>

The content inside the <paginator> take is what gets iterated just like an {{#each}} loop. The context is each item passed into items.

Includes minimal styling under the class .ractive-paginator. Styles are included in the javascript and added to the page on load.

API

Properties

items: Array of items that are paginated

perpage: How many items to display per page (default 30)

page: the current page

lastPage: how many pages total based off the number of items and perpage

Methods

previousPage: Go to the previous page

nextPage: Go to the next page

gotoPage: Go to a specific page

:)

Open to PRs and stuff. I'm around.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free