jQuery paginator
A very basic jQuery "pagination" plugin.
Don't expect too much, work in progress.
Example usage:
<div id="container">
<ul class="inline noitem">
<li><button data-js="prev">Prev</button></li>
<li><button data-js="next">Next</button></li>
</ul>
<div class="sep"></div>
<ul id="items"></ul>
<p data-js="pagination"></p>
</div>
<script type="text/template" id="tpl-item">
<li><span class="item-name">{{name}}</span>
<span class="item-price">{{price}}€</span></li>
</script>
var $container = $('#container')
, $placeholder = $container.find('#items')
, tpl = Handlebars.compile($('#tpl-item').html());
$container.pagination({
items: [], // List of items to render (optional)
placeholder: $placeholder, // If specified will be used to render the collection items (optional)
itemsPerPage: 5, // Number of items to display per page (default 5),
template: tpl, // The template function to be used for rendering items
change: function (data) {} // A handler which will be invoked on update (optional)
});
You can also use an existing D.O.M. element instead of a template if you need to.
$container.paginator({
placeholder: $items,
useDom: true,
itemsPerPage: 3,
change: function (data) {}
});
Examples are provided in html files as well as in the test directory.
Installation etc...
-
Make sure you have Node.js installed
-
Install required npm and Bower dependencies
npm install
-
Run the tests with
npm test
-
Lint the source with
npm run lint
-
Generate a minified version with
npm run uglify
License
MIT