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

Let us need to make a pagination of the form:

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

For implementation, you need a PaginationView and a 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 form. In the constructor, we accept parameters, params is an object of parameters.

Now consider the logic of issue. 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 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; 

Then we need to know or need us to issue "..." from each side. We get two variables that show whether you need:

 var left_dots = true; var right_dots = true; 

And so, when we need "...", when the beginning is more than 2 (left) and when less than the end - 1 (right). To do this, we write two checks, in which we 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 also 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 the pattern:

 $(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

The template is written using Twitter Bootstrap. Trivial issue.

 <ul> <% if (page_active > 1) { %> <li><a href="<%= link %><%= page_active-1 %>">«</a></li> <% } %> <% if (left_dots) {%> <li><a href="<%= link %>1">1</a></li> <li class="disabled"><a href="#">...</a></li> <% } %> <% for (var i = nav_begin; i <= nav_end; i++) { %> <li <% if (page_active == i) print('class="active"') %> ><a href="<%= link %><%= i %>"><%= i %></a></li> <% } %> <% if (right_dots) {%> <li class="disabled"><a href="#">...</a></li> <li><a href="<%= link %><%= page_count %>"><%= page_count %></a></li> <% } %> <% if (page_active < page_count) { %> <li><a href="<%= link %><%= page_active+1 %>">»</a></li> <% } %> </ul> 

PS It's very simple, take and use :).
PPS In recent times I have been writing a lot on Backbone.js with your permission, I will upload similar things.