Pagination for Backbone.js

Good afternoon! Recently I wrote pagination for Backbone.js, so I would like to share with you, maybe someone will come in handy.

Let us need to do a pagination of the form:

1 ... 3 4 5 6 7 ... 12

For implementation, we need the PaginationView and the pagination-view template .

View - PaginationView


window.PaginationView = Backbone.View.extend({
	template: _.template($("#pagination-view").html()), // шаблон
	link: "", // ссылка
	page_count: null, // кол-во страниц
	page_active: null, // активная страница
	page_show: 5, // кол-во страниц в блоке видимости
	attributes: { // атрибуты элемента
		"class": "pagination"
	},
        initialize: function(params) { // конструктор
		this.link = params.link;
		this.page_count = params.page_count;
		if (this.page_count <= this.page_show) {
			this.page_show = this.page_count;
		}
		this.page_active = params.page_active;
	},
       render: function(eventName) { // выдача
		...
	}
});

We have such a description of the species. We accept parameters in the constructor, params is an object of parameters.

Now consider the logic of issuance. To issue pagination, or rather a block of visible pages, we need to find the index of the beginning and end of these pages. We are looking for the number of elements before the active and after. That is, divide in half.

var range = Math.floor(this.page_show / 2);
var nav_begin = this.page_active - range;
if (this.page_show % 2 == 0) { // Если четное кол-во
    nav_begin++;
}
var nav_end = this.page_active + range;

Next we need to find out or whether we need to give out "..." from each side. We start two variables that show whether we need:

var left_dots = true;
var right_dots = true;

And so, when we need "...", when the beginning is greater than 2 (left) and when the end is less than 1 - 1 (right). To do this, we write two checks in which we will analyze another special case. It consists in the fact that if we have an active second, then the issuing unit has one more element.

1 2 3 4 5 6 ... 12

And so on at the end.

1 ... 7 8 9 10 11 12

if (nav_begin <= 2) {
	nav_end = this.page_show;
	if (nav_begin == 2) {
             nav_end++;
        } 
	nav_begin = 1;
	left_dots = false;
}
if (nav_end >= this.page_count - 1 ) {
	nav_begin = this.page_count - this.page_show + 1;
	if (nav_end == this.page_count - 1) {
               nav_begin--;
        }
	nav_end = this.page_count;
	right_dots = false;
}

And finally we send to the template:

	
$(this.el).html( this.template({
	link: this.link,
	page_count: this.page_count,
	page_active: this.page_active,
	nav_begin: nav_begin,
	nav_end: nav_end,
	left_dots: left_dots,
	right_dots: right_dots
}) );

Pagination-view template


Template written using Twitter Bootstrap. Trivial issue.

    <% if (page_active > 1) { %>
  • «
  • <% } %> <% if (left_dots) {%>
  • 1
  • ...
  • <% } %> <% for (var i = nav_begin; i <= nav_end; i++) { %>
  • ><%= i %>
  • <% } %> <% if (right_dots) {%>
  • ...
  • <%= page_count %>
  • <% } %> <% if (page_active < page_count) { %>
  • »
  • <% } %>


PS Everything is very simple, take and use :).
PPS In recent years, I write a lot on Backbone.js with your permission I will post similar things.

Also popular now: