0

大量のデータがあり、ページネーションを作成したいので、1 ページあたり 5 項目をロードでき、10 ページが必要です。http://addyosmani.com/blog/backbone-paginator-new-pagination-components-for-backbone-js/に触発されようとしています

<ul class="pagination" id="paginationSelect">



            <% for(var i = 0; i < 10 ; i++){ %>
                <% if(i === 0){ %>
                    <li><a id="a-page-item"  class="page">Previous</a></li>

                <% } else if(i > 0 && i < 10 - 1){ %>
                    <li><a id="a-page-item"  class="page"> <%= i %> </a></li>
                <% } %>
            <% } %>

        <li class="arrow"><a href="">Next</a></li>
      </ul>

（http://jsfiddle.net/LQg7W/2151/もちろん、このjsfiddleにはcssがありません）私の問題は、各ページ（1から10まで）をクリックすると、1から5までのデータがロードされることです（およびすべてのそれらは同じです）しかし、最初のページに5つのデータ、2番目のページに次の5つのデータなどを含めるにはどうすればよいですか。

event : {

"click #paginationSelect" : "fetchSelectedData"
}

onPageClick : function() {

            console.log("you clickedddd");

            this.collection.setPagination(1, 5);
            this.collection.setNrPages(5);

            this.collection.reset();
            this.$("#listMessages").empty(); //listMessage is a placeholder for showing data
            this.collection.fetch();
        },
4

1 に答える 1

0

Backbone.Paginator は、サーバー側のページング ( Backbone.Paginator.requestPager ) とクライアント側のページング ( Backbone.Paginator.clientPager )という 2 つの主要なページネーション アプローチの実装を提供します。

どちらを使用されているかわかりませんので、コレクションのソース コードを提供していただけますか?

HTML テンプレートについては、次のように変更することをお勧めします。

<ul class="pagination" id="paginationSelect">

        <li><a id="previous-page" class="page">Previous</a></li>

        <% for(var i = 0; i < 10 ; i++) { %>
                <li><a id="page" class="page"><%= i %></a></li>
        <% } %>

        <li><a id="next-page" class="page">Next</a></li>
  </ul>

イベントハンドラーを次のように更新します（requestPagerを使用する場合）：

event : {"click #previous-page" : "previousPage",
         "click #next-page" : "nextPage",
         "click #page" : "page"},

previousPage : function(e) {
  this.collection.requestPreviousPage();
},

nextPage : function(e) {
  this.collection.requestNextPage();
},

page : function() {
  var page = $(e.target).text();
  this.collection.goTo(page);
},

コレクションから requestPreviousPage()、requestNextPage()、goTo(pageNumber) などのメソッドを呼び出すと、Backbone.Paginator は必要なデータを自動的に取得します。

ところで、プラグインの github サンプル フォルダー: Backbone.PaginatorでBackbone.Paginator.requestPagerとBackbone.Paginator.clientPagerの両方を使用する非常に良い例があるので、それらを見てください。

1 つだけ注意してください。サンプルを機能させるには、PaginatedCollection.jsのURL を に変更する必要がありhttps://api.github.com/repos/backbone-paginator/backbone.paginator/issues?ます。サンプルで使用される URL はデータを返さないためです。クライアント ページングの例では、同じファイルのserver_apiセクションもコメント アウトする必要があるため、クライアント側のページングのように機能します。

于 2013-09-24T09:15:09.370 に答える