❤
npm
Sign UpSign In

pagination

0.4.6 • Public • Published

pagination

Pagination for javascript/nodejs

build status

usage example

var pagination = require('pagination');
var paginator = pagination.create('search', {prelink:'/', current: 1, rowsPerPage: 200, totalResult: 10020});
console.log(paginator.render());

Or customized renderer

This example show how to generate markup for twitter boostrap, see example/twitter.html for template rendering

var pagination = require('pagination')
 
var boostrapPaginator = new pagination.TemplatePaginator({
    prelink:'/', current: 3, rowsPerPage: 200,
    totalResult: 10020, slashSeparator: true,
    template: function(result) {
        var i, len, prelink;
        var html = '<div><ul class="pagination">';
        if(result.pageCount < 2) {
            html += '</ul></div>';
            return html;
        }
        prelink = this.preparePreLink(result.prelink);
        if(result.previous) {
            html += '<li class="page-item"><a class="page-link" href="' + prelink + result.previous + '">' + this.options.translator('PREVIOUS') + '</a></li>';
        }
        if(result.range.length) {
            for( i = 0, len = result.range.length; i < len; i++) {
                if(result.range[i] === result.current) {
                    html += '<li class="active page-item"><a class="page-link" href="' + prelink + result.range[i] + '">' + result.range[i] + '</a></li>';
                } else {
                    html += '<li class="page-item"><a class="page-link" href="' + prelink + result.range[i] + '">' + result.range[i] + '</a></li>';
                }
            }
        }
        if(result.next) {
            html += '<li class="page-item"><a class="page-link" href="' + prelink + result.next + '" class="paginator-next">' + this.options.translator('NEXT') + '</a></li>';
        }
        html += '</ul></div>';
        return html;
    }
});
console.log(boostrapPaginator.render());

OR

var pagination = require('pagination');
var paginator = new pagination.SearchPaginator({prelink:'/', current: 10, rowsPerPage: 200, totalResult: 10020});
console.log(paginator.render());
// output (without newlines)
<div class="paginator">
    <a href="/?page=9" class="paginator-previous">Previous</a>
    <a href="/?page=8" class="paginator-page paginator-page-first">8</a>
    <a href="/?page=9" class="paginator-page">9</a>
    <a href="/?page=10" class="paginator-current">10</a>
    <a href="/?page=11" class="paginator-page">11</a>
    <a href="/?page=12" class="paginator-page paginator-page-last">12</a>
    <a href="/?page=11" class="paginator-next">Next</a>
</div>

OR need data from the calculation

var pagination = require('pagination');
var paginator = new pagination.SearchPaginator({prelink:'/', current: 3, rowsPerPage: 200, totalResult: 10020});
console.log(paginator.getPaginationData());
 
// output
{ prelink: '/',
  current: 3,
  previous: 2,
  next: 4,
  first: 1,
  last: 51,
  range: [ 1, 2, 3, 4, 5 ],
  fromResult: 401,
  toResult: 600,
  totalResult: 10020,
  pageCount: 51 }

Pagination on client side

<html>
    <head>
    <script src="../release/pagination.full.min.js"></script> 
    </head>
    <body>
        <div id="paging"></div>
        <script type="text/javascript">
        (function() {
            var paginator = new pagination.ItemPaginator({prelink:'/', current: 3, rowsPerPage: 200, totalResult: 10020});
            var html = paginator.render();
            var paginator = pagination.create('search', {prelink:'/', current: 1, rowsPerPage: 200, totalResult: 10020});
            html += paginator.render();
            document.getElementById("paging").innerHTML = html;
        })();
        </script> 
    </body>
</html>

You can browse example folder for more. Release folder contains all mimified versions for browser. To customize your need you can use ./bin/build.js -h html += paginator.render();

Classes

SearchPaginator(options)

  • options See Options bellow

See also http://developer.yahoo.com/ypatterns/navigation/pagination/search.html

ItemPaginator(options)

  • options See Options bellow

See also http://developer.yahoo.com/ypatterns/navigation/pagination/item.html

TemplatePaginator(options)

  • options See Options bellow

This class will render the markup as desired. The options must contains property "template" It can be either a template string or a compiled template. The local variables available in the template are

  • prelink String
  • preparedPreLink String
  • current Integer
  • previous Integer
  • next Integer
  • first Integer
  • last Integer
  • range Array
  • fromResult Integer
  • toResult Integer
  • totalResult Integer
  • pageCount Integer
  • translations Object with properties NEXT, PREVIOUS, FIRST, LAST, CURRENT_PAGE_REPORT

API

Paginator.getPaginationData()

Return an object contains data for rendering markup. See example above.

Paginator.set(option, value)

Set value to a single for option. See options section bellow

Paginator.preparePreLink(prelink)

  • prelink String

Append page param to the link

Paginator.render()

Return the rendered markup

pagination.create(type, options)

  • type String
  • options Object see Options section bellow

Wrapper for create instance of classes above

pagination.TemplateEngine.parse(str, options)

See pagination.TemplateEngine.compile bellow

pagination.TemplateEngine.compile(str, options)

  • str Template string
  • options object which can contains .open .close .cache and .id

Options

Object to pass to paginator classes (second argument when using create function)

totalResult: {Integer}

Number of total items in result set

prelink: {String}

Link to append the page-param

rowsPerPage: {Integer}

Number of items per page, default to 10

pageLinks: {Integer}

Number of links to create in page range, default to 5. This value will be ignored when using item pagination.

current: {Integer}

Indicate which page is the current one. Page always starts with 1.

translationCache: {Boolean}

To indicate if the result from CURRENT_PAGE_REPORT translation can be cached or not. Default is false. The cache is global and will be the same for all instances which have specified translationCacheKey as bellow.

translationCacheKey: {String}

For supporting multiple versions of translation of CURRENT_PAGE_REPORT. It can use for multilanguages or different formats. Default is "en"

translator: {Function}

For translations of FIRST, NEXT, ... Simple example

var translations = {
    'PREVIOUS' : 'Voorgaand',
    'NEXT' : 'Volgende',
    'FIRST' : 'Eerst',
    'LAST' : 'Laatste',
    'CURRENT_PAGE_REPORT' : 'Resulten {FromResult} - {ToResult} van {TotalResult}'
};
 
var item = new ItemPaginator({
    prelink : '/',
    pageLinks : 5,
    current : 5,
    totalResult : 100,
    translator : function(str) {
        return translations[str];
    }
});

pageParamName: {String}

The name of the page parameter. Default is "page"

slashSeparator: {Boolean}

Indicate if using slash instead of equal sign, ie /page/2 instead of /?page=2, default is false.

template: {String | Function}

This can be a template string or a compiled template (function). The compiled function will be called with an object as argument.

Acknowledgements

Template engine is taking mostly from https://github.com/vanng822/ejs which is a fork of https://github.com/visionmedia/ejs

/pagination/

    Package Sidebar

    Install

    npm i pagination

    Repository

    github.com/vanng822/pagination

    Homepage

    github.com/vanng822/pagination

    Weekly Downloads

    2,832

    Version

    0.4.6

    License

    MIT

    Unpacked Size

    90.1 kB

    Total Files

    37

    Last publish

    Collaborators

    • vanng822
    Try on RunKit
    Report malware