https://github.com/superraytin/paginationjs

A jQuery plugin to provide simple yet fully customisable pagination.
https://github.com/superraytin/paginationjs

jquery-plugin pagination pagination-library

Last synced: about 1 month ago
JSON representation

A jQuery plugin to provide simple yet fully customisable pagination.

• Host: GitHub
• URL: https://github.com/superraytin/paginationjs
• Owner: superRaytin
• License: mit
• Created: 2015-01-01T05:54:05.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2023-03-17T02:46:52.000Z (about 2 years ago)
• Last Synced: 2025-04-06T22:02:18.370Z (about 2 months ago)
• Topics: jquery-plugin, pagination, pagination-library
• Language: JavaScript
• Homepage: http://pagination.js.org
• Size: 1.7 MB
• Stars: 919
• Watchers: 33
• Forks: 654
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Pagination.js

> A jQuery plugin to provide simple yet fully customisable pagination.

[![NPM version][npm-image]][npm-url]

[![Bower version][bower-image]][bower-url]

[![CDNJS](https://img.shields.io/cdnjs/v/paginationjs.svg)](https://cdnjs.com/libraries/paginationjs)

[npm-url]: https://npmjs.org/package/paginationjs

[npm-image]: http://img.shields.io/npm/v/paginationjs.svg

[bower-url]:http://badge.fury.io/bo/paginationjs

[bower-image]: https://badge.fury.io/bo/paginationjs.svg



See demos and full documentation at official site: [http://pagination.js.org](http://pagination.js.org)

# Installation / Download

`npm install paginationjs` or `bower install paginationjs` or just download [pagination.js](dist/pagination.js) from the git repo.

# Quick Start

```html





```


```js

$('#pagination-container').pagination({

    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],

    callback: function(data, pagination) {

        // template method of yourself

        var html = template(data);

        $('#data-container').html(html);

    }

})

```

# Rendering data

Below is a minimal rendering method:

```js

function simpleTemplating(data) {

    var html = '
';

    $.each(data, function(index, item){

        html += '
'+ item +'
';

    });

    html += '
';

    return html;

}

```


Call:

```js

$('#pagination-container').pagination({

    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],

    callback: function(data, pagination) {

        var html = simpleTemplating(data);

        $('#data-container').html(html);

    }

})

```

To make it easier to maintain, you'd better to use specialized templating engine to do that. Such as [Handlebars](http://handlebarsjs.com/) and [Undercore.template](http://underscorejs.org/#template).

### Handlebars

```html

    <ul>

    {{#each data}}

        <li>{{this}}</li>

    {{/each}}

    </ul>

```

```js

$('#pagination-container').pagination({

    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],

    callback: function(data, pagination) {

        var html = Handlebars.compile($('#template-demo').html(), {

            data: data

        });

        $('#data-container').html(html);

    }

})

```

### Underscore

```html

    <ul>

    <% for (var i = 0, len = data.length; i < len; i++) { %>

        <li><%= data[i] %></li>

    <% } %>

    </ul>

```

```js

$('#pagination-container').pagination({

    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],

    callback: function(data, pagination) {

        var html = _.template($('#template-demo').html(), {

            data: data

        });

        $('#data-container').html(html);

    }

})

```

Or any other templating engine you prefer.

# License

Released under the MIT license.

MIT: [http://rem.mit-license.org](http://rem.mit-license.org/), See [LICENSE](/LICENSE)