Question

我在骨干中建立一个分页。问题是页面的数量已经增长，现在很多都会破坏网站的布局。所以我想实现一个功能，我可以渲染让我们说前10页，然后使用next / prev按钮控制哪些页码应该显示。但总是只显示10页：

＆LT; 1 2 3 4 5 6 7 8 9 10＆gt;

＆LT; 2 3 4 5 6 7 8 9 10 11＆gt;

所以现在我把它添加到我的分页（所有页面）

    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>

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

任何人都知道如何做到这一点，可以举个例子吗？非常感谢！

Answer 1

你可以这样做：

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

骨架分页10一次

1 个答案: