Issue in pagination in backbone - backbone.js

Question

I want to do pagination in backbone. I have a selectbox and when I click on it I want it to show sepcific number of data.
<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>
Model
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;
},
This is my collection:
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();
});
},
and this is my view in a separate file: (uncompleted)
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);
}
To be honset, I do not know how to evaluate max page in view. What I did is that I get the id of selector when the user click on it (the number of data I want to load e.g. 100, 50 etc) and created another function for evaluating max page to load. but how can I get the number of data
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

I would suggest to you to do this on the server side. Load only the items you want to show and if the parameters change create a new request.
So the steps:
Create a service that recives the per page and page number parameters and returns only the corresponding items.
When the user first enter this page do a request with the default parameters and render the items.
When the user changes the page or the items per page do a new request and render the items that came from the server.