在理解使用javascript分页加载数据的概念时出现问题

Question

I have lots of data and I want to make a pagination so I am able to load 5 items per page and I want to have 10 pages. I am trying to get inspired by 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/ this jsfiddle is without css of course) My problem is that when I click on each of the pages (from 1 to 10 ) it loads data from 1 to 5 ( and all of them are the same ) but how can I have 5 data on first page, next 5 data on the second page and so on.

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();
        },

Answer 1

Backbone.Paginator provides implementation of two main pagination approaches - server side paging ( Backbone.Paginator.requestPager ) and client side paging ( Backbone.Paginator.clientPager ).

It's not clear which one do you use, so could you please provide source code for your collection ?

As for HTML template I'd propose you to change it to something like this:

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

and update event handlers to be (in case you use 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);
},

Backbone.Paginator will automatically fetch required data once you call methods like requestPreviousPage(), requestNextPage(), goTo(pageNumber) from collection.

BTW, there are quite good examples of using both Backbone.Paginator.requestPager and Backbone.Paginator.clientPager on plugin's github examples folder: Backbone.Paginator , so you might take a look at them.

Just one note: to make examples work you'd need to change URL in PaginatedCollection.js to https://api.github.com/repos/backbone-paginator/backbone.paginator/issues? because URL used in examples doesn't return any data. In client-paging example you'd also need to comment out server_api section in the same file, so it would work more like client-side paging.