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 に答える