Backbone.SimplePaginator
Backbone.SimplePaginator is a small Backbone.Collection plugin for composing the multi-page pagination component.
It was inspired by the Backbone.Paginator, to which credit is due.
Installation
$ bower install backbone.simple-paginator --save
or download the latest version here, and include backbone.simple-paginator.js in your page, after Backbone and it's dependencies.
Usage example
1. Create a new paginated collection class with perPage
var PaginatedCollection = Backbone.SimplePaginator.extend({
// how many items per page should be shown
perPage: 6
});2. Create a new pagination view class
var PaginationView = Backbone.View.extend({
template: _.template($('#pagination-view').html()),
events: {
'click a.first': 'goToFirst',
'click a.prev': 'goToPrev',
'click a.page': 'goToPage',
'click a.next': 'goToNext',
'click a.last': 'goToLast'
},
initialize: function() {
// listen for "turn" event to be notified when paginating the collection
this.listenTo(this.collection, 'turn', this.render, this);
},
goToFirst: function(e) {
e.preventDefault();
// go to the first page
this.collection.goToFirst();
},
goToPrev: function(e) {
e.preventDefault();
// go to the previous page
this.collection.goToPrevious();
},
goToPage: function(e) {
e.preventDefault();
// go to a specific page
this.collection.goTo($(e.target).text());
},
goToNext: function(e) {
e.preventDefault();
// go to the next page
this.collection.goToNext();
},
goToLast: function(e) {
e.preventDefault();
// go to the next page
this.collection.goToLast();
},
render: function() {
this.$el.html(this.template(this.collection.info()));
return this;
}
});3. Create a template for pagination UI
<script type="text/template" id="pagination-view">
<ul class="pagination">
<% if (currentPage != 1) { %>
<li><a href="#" class="first">««</a></li>
<% } else { %>
<li class="disabled"><a href="#" class="first">««</a></li>
<% } %>
<% if (currentPage != 1) { %>
<li><a href="#" class="prev">«</a></li>
<% } else { %>
<li class="disabled"><a href="#" class="prev">«</a></li>
<% } %>
<% _.each(pageSet, function(p) { %>
<% if (currentPage == p) { %>
<li class="active"><a href="#" class="page"><%- p %></a></li>
<% } else { %>
<li><a href="#" class="page"><%- p %></a></li>
<% } %>
<% }); %>
<% if (lastPage != currentPage && lastPage != 0) { %>
<li><a href="#" class="next">»</a></li>
<% } else { %>
<li class="disabled"><a href="#" class="next">»</a></li>
<% } %>
<% if (lastPage != currentPage && lastPage != 0) { %>
<li><a href="#" class="last">»»</a></li>
<% } else { %>
<li class="disabled"><a href="#" class="last">»»</a></li>
<% } %>
</ul>
</script>License
The MIT License (MIT)
Copyright (c) 2013 Sei Kataoka <sei@uniba.jp>
