我正在使用rest api和spring boot来开发backbone js,在jsp页面中加载更多数据或进行分页,无论我是否必须使用backbone js或简单的javascript。我很困惑。请给我关于这个困惑的建议
最佳答案
将使分页像这样 1… 3 4 5 6 7… 12。 为此,我们需要 PaginationView(backbone View) 和 pagination-view(template)
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;
接下来,我们需要知道,否则我们必须在每一侧给出“...”。我们设置两个变量,这会显示是否有必要:
var left_dots = true;
var right_dots = true;
所以,当我们需要“...”时,它开始时大于 2(左),而小于结束时 - 1(右)。为此,请编写两项检查,分析一种特定情况。事实上,如果我们有两个 active 元件,则分配单元就会多一个元件。
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
}) );
模板分页 View (我使用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 这里正在为这样的情况使用 git https://gist.github.com/io41/838460 (不是我的)
关于javascript - 主干js中的分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39942317/