Question

我正在使用带有spring boot的rest api工作的骨干js，在jsp页面中加载更多数据或做分页，无论我是否必须使用主干js或简单的javascript。我很困惑。请给我这个混乱的建议

Answer 1

将这样的分页1 ... 3 4 5 6 7 ... 12。为此，我们需要PaginationView（骨干视图）和分页视图（模板）

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) { // выдача
       ...
    }

}）;

现在考虑逻辑问题。对于分页的发布，而是阻止可见页面，我们需要找到这些页面的开头和结尾的索引。我们正在寻找活动和之后的元素数量。也就是说，分成两半。

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;

接下来，我们需要知道，或者我们必须给出＆＃34; ...＆＃34;在每一边。我们设置了两个变量，它们将显示是否有必要：

var left_dots = true;
var right_dots = true;

所以，当我们需要＆＃34; ...＆＃34;当它开始超过2（左）和小于结束时 - 1（右）。为此，请编写两个检查，分析一个特定情况。它包括这样一个事实，即如果我们有两个活动，则分配单元还有一个元素。

1 2 3 4 5 6 ... 12

就在最后。

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

此后需要发送到模板

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

模板分页视图（我使用了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>

P.S。很简单，采取和使用：）。

P.S这里是针对像https://gist.github.com/io41/838460（不是我的）

这样的情况工作的git

主干js中的分页

1 个答案: