Question

我想在骨干中做分页。我有一个选择框，当我点击它时，我希望它显示特定数量的数据。

<div class="results right" >
          <form>
            <label for="results">Results pr. page</label>
            <select name="results" id="ShowSelect">
              <option value="25" >25</option>
              <option value="50" >50</option>
              <option value="100" >100</option>
              <option value="500" >500</option>
            </select>
          </form>
        </div>

模型

defaults : {
                id : null,
                created : null,
                timestamp : null


            },

parse : function(response){
                response.id = response._id.$oid;
                response.created = response.created.$date;
                response.timestamp = response.timestamp.$date;

                return response;
            },

这是我的收藏：

pagination : function(perPage, page) {
                page = page - 1;
                var collection = this;
                collection = _(collection.rest(perPage * page));
                collection = _(collection.first(perPage));
                return collection.map( function(model) {
                    return model.toJSON();
                });
            },

这是我在单独文件中的观点:(未完成）

     events : {

                            "change #messageSelect" : "changedGroup",

                        },

       changedGroup : function(e){
                        e.preventDefault();
                        console.log("selector changed");
                        this.currentPage = 1;
                        this.selectedGroupId = $("#messageSelect :selected").attr("value");
                        console.log("id of select is", this.selectedGroupId);

                        //Resets current groups when changed.
                        this.currentGroup = this.collection.get(this.selectedGroupId);
                    },

renderRecentList : function(groupID, pageToLoad) {
                    var banPage = pageToLoad || this.currentBansPage ;
                    console.log("Load page", banPage);
                    this.selectedGroup = this.collection.get(groupID);
                }

要成为现实，我不知道如何评估视图中的最大页面。我做的是当用户点击它时我得到选择器的id（我要加载的数据的数量，例如100,50等），并创建了另一个用于评估要加载的最大页面的函数。但我怎样才能获得数据

 var maxPages = Math.ceil(? / this.pageSize);
                        console.log("max", maxPages);
                        var pageToLoad = this.currentPage + 1;
                        console.log("load me page", pageToLoad);
                        if(pageToLoad <= maxPages) this.renderRecentList(this.selectedGroupId, pageToLoad);
                        else{
                            console.log("no more pages to load");
                            this.setGlobalMessage("no more pages to load", "information");
                        }
                        return this;

Answer 1

我建议你在服务器端执行此操作。仅加载要显示的项目，如果参数更改，则创建新请求。

所以步骤：

创建一个服务，该服务可以恢复每页和页码参数，并仅返回相应的项目。
当用户首次进入此页面时，请使用默认参数执行请求并呈现项目。
当用户更改页面或每页的项目时，请执行新请求并呈现来自服务器的项目。

骨干中的分页问题

1 个答案: