0

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

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

1 回答 1

0

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

所以步骤：

  1. 创建一个接收每页和页码参数并仅返回相应项目的服务。
  2. 当用户第一次进入此页面时，使用默认参数发出请求并呈现项目。
  3. 当用户更改页面或每页的项目时，执行新请求并呈现来自服务器的项目。
于 2013-09-04T04:35:10.853 回答