Paginierung im Backbone js

Question

Ich arbeite am Backbone js mit Rest api mit Spring Boot, in einer Jsp-Seite, um mehr Daten zu laden oder Seitenumbruch, ob ich Rückgrat js oder einfach Javascript verwenden muss. Ich bin verwirrt. Bitte geben Sie mir einen Vorschlag für diese Verwirrung

Answer 1

Wird Paginierung wie dieses 1 ... 3 4 5 6 7 ... 12. Dazu machen wir PaginationView (Backbone View) und Paginierung-Ansicht (Template) müssen

window.PaginationView = Backbone.View.extend({ 
    template: _.template($("#pagination-view").html()), // template 
    link: "", // link 
    page_count: null, // number of pages 
    page_active: null, // active page 
    page_show: 5, // pagination bar items number 
    attributes: { // element attributes 
     "class": "pagination" 
    }, 
    initialize: function(params) { // constructor 
     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) { // выдача 
     ... 
    } 

});

Jetzt betrachten Sie das Problem der Logik. Für die Ausgabe der Seitennummerierung, sondern um die sichtbaren Seiten zu blockieren, müssen wir den Index für den Anfang und das Ende dieser Seiten finden. Wir suchen nach der Anzahl der Elemente zum aktiven und nach. Das heißt, teilen Sie sich in zwei Hälften.

var range = Math.floor(this.page_show/2); 
var nav_begin = this.page_active - range; 
if (this.page_show % 2 == 0) { //If an even number 
    nav_begin++; 
} 
var nav_end = this.page_active + range; 

Als nächstes müssen wir wissen, oder wir müssen "..." auf jeder Seite ausgeben. Wir setzen zwei Variablen auf, die zeigen, ob es notwendig ist:

var left_dots = true; 
var right_dots = true; 

Also, wenn wir brauchen „...“, wenn es mehr als 2 begann (links) und wenn weniger als das Ende - 1 (rechts). Schreiben Sie dazu zwei Überprüfungen, die einen bestimmten Fall analysieren. Es besteht darin, dass, wenn wir zwei aktiv haben, die Dosiereinheit ein weiteres Element hat.

1 2 3 4 5 6 ... 12

Und am Ende.

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; 
} 

Danach Notwendigkeit

$(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 
})); 

Template Paginierung-view (I verwendet twitter bootstrap)

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

Template zu senden,

PS Ganz einfach, nimm und benutze :).

P.S hier arbeitet git für Situationen wie diese https://gist.github.com/io41/838460 (nicht meine)