文章/答案/技术大牛

发布

社区首页 >问答首页 >脊骨分页一次10页

问脊骨分页一次10页
EN

Stack Overflow用户

提问于 2014-02-03 16:36:04

回答 1查看 319关注 0票数 1

我在主干道上建一个分页。问题是，网页的数量已经增长，现在有很多，因为它破坏了网站的布局。因此，我想实现一个功能，在这里我可以呈现前10页，然后使用next/prev按钮控制应该显示哪个页码。但总是只显示10页这样的内容：

<1 2 3 4 5 6 7 8 9 10 >

<2 3 4 5 6 7 9 10 11 >

所以现在我把这个附加到我的分页(全页)。

    updateTotal: function () {
        var self = this;
        self.totalModel.fetch({

            success:function(model,response) {
                var total = response.data; //all iems
                var p = total/self.perPage;
                var r = total-Math.round(p)   
                self.pagination = _.template($("#pagination_template").html(), {
                    pages:Math.ceil(p)
                });
                self.render();
            }
        });
    },

这就是我如何用html (underscore.js)打印出来的。

    <script type="text/template" id="pagination_template">
        <section class="pagination">
            <ul>
                <% for (var i = 0; i < pages; i++) { %>              
                    <li>
                        <a href="#" data-offset="<%= i*9 %>" data-page="<%= i+1 %>">
                            <%= i+1 %>
                        </a>
                    </li> 
                <% } %>
            </ul>
            <div class="paging prev">&#9668;</div>
            <div class="paging next">&#9658;</div>
        </section>
    </script>

我有一个变量，表示当前页面，并且我知道总页数。但我不知道如何实现这一点，我把它描述为我的问题。

有人知道怎么做，可以举个例子吗？我会非常感激的！

javascript

backbone.js

underscore.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-03 19:21:16

你可以这样做：

    updateTotal: function () {
        var self = this;
        self.totalModel.fetch({

            success:function(model,response) {
                var total = response.data; //all iems
                var p = total/self.perPage;
                var r = total-Math.round(p);
                var c = ... // current page
                self.pagination = _.template($("#pagination_template").html(), {
                    pages:Math.ceil(p),
                    current: c
                });
                self.render();
            }
        });
    },

和html

    <script type="text/template" id="pagination_template">
        <section class="pagination">
            <ul>
                <% 
                var renderPage;
                for (var i = 1; i <= pages; i++) {
                    renderPage = false;
                    if (pages < 10) {
                        renderPage = true;
                    } else {
                        if (current <= 5) {
                            if (i < 10) {
                                renderPage = true;
                            }
                        } else if (current <= pages - 5) {
                            if ((current - 5) < i || (current + 5) > i) {
                                renderPage = true;
                            }
                        } else {
                            if ((pages - 9) < i) {
                                renderPage = true;
                            }
                        }
                    };

                    if (renderPage) { %>
                        <li>
                            <a href="#" data-offset="<%= i*9 %>" data-page="<%= i %>">
                                <%= i %>
                            </a>
                        </li> 
                    <% }
                } %>
            </ul>
            <div class="paging prev">&#9668;</div>
            <div class="paging next">&#9658;</div>
        </section>
    </script>

它将打印当前页和前后的4页。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21532650

复制

相似问题

问脊骨分页一次10页
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问脊骨分页一次10页EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问脊骨分页一次10页
EN