Pagination using backbone.js and underscore template

this post will talk about how to create a pagination area for pagination using backbone.js and underscore templates.

you will need to have the pagination object available on the client side in the following form before its passed to the model object.this could have been request as  part of a collection request  which had been done to get fresh data about a collection . subfields can be created for the pagination parts .

//sample pagintation info  returned from controller function will be passed as an     arguement when the view is being created for the PaginateView

//cakephp controller example below 

class ProductController extends AppController {
public $name = 'Product';

public function products(){

$products = $this->paginate('Product');  
$paginate_data=array();
$paginate_data['page']=$this->request->params['paging']['Product']['page'];
$paginate_data['pageCount']=$this->request->params['paging']['Product']['pageCount'];
$paginate_data['prevPage']=$this->request->params['paging']['Product']['prevPage'];
$paginate_data['nextPage']=$this->request->params['paging']['Product']['nextPage'];
//for putting the product info retrieved int a form which can be used for the backbone collection
//on the front end
$response_array=array();
foreach($products as $val){
response_array[]=$val['Product'];
};
echo json_encode(array("pagination"=>$paginate_data,"products"=>$response_array));
exit();

}}

//sample pagination model with default setup

 var PageModel = Backbone.Model.extend({ 

defaults: {
query :’null,
pagination : null,
url:”http://localhost/Product/products/”
} });

//sample view for pagination item

var PaginateView= Backbone.View.extend({
tagname:'div',
id:'page_div',
model:PageModel,
template: _.template($('#paginate_tmpl').html()),
render:function(){
var pass_data={
query:this.model.get('query'),
url:this.model.get('url'),
paginate:this.model.get('pagination')
};
    var html = this.template(pass_data);
    this.$el.html(html);
    return this;
}
});

//sample creation of a pagination view with data returned from server as arguement

var pagination_data={
page:2,
pageCount:10,
prevPage:1,
nextPage:3
};
var query_data="a=1&b=2&c=3";
var url_data=$("#product_list_url").val();
var page = new PaginateView({model:new PageModel({query:query_data,url:url_data,pagination:pagination_data})});

//lastly pagination underscore template

this example works  for (first,previous,next,last)pagination type and cycling inbtween them
paginate template does some calculations using the page,pageCount,prevPage,nextPage to determine current page
and show it and hide links for the others 
you will have to use your own css here to style links

<!--

this template is a template for pagination
combination of underscore tempate
-->

<script type="text/template" id="paginate_tmpl">

<%
//for first page of  multiple page resultset
if(paginate.page!=paginate.pageCount && paginate.page==1 && !paginate.prevPage && paginate.nextPage)  {    
%>

<span class="pglink"><< previous </span>
<span class="pglink"><a href="<%= url+"?page="+(paginate.page+1)+"&"+query %>">next >></a></span>
<span class="pglink"><a href="<%= url+"?page="+(paginate.pageCount)+"&"+query %>" rel="last">last ></a></span>

<%
//for pages > current page but less than pageCount
}else if(paginate.page > 1 && paginate.page < paginate.pageCount){  
%>

<span class="pglink"><a href="<%= url+"?page=1"+"&"+query %>">< first</a></span>
<span class="pglink"><a href="<%= url+"?page="+(paginate.page-1)+"&"+query %>" rel="previous"><< previous</a></span>
<span class="pglink"><a href="<%= url+"?page="+(paginate.page+1)+"&"+query %>" rel="next">next >></a></span>
<span class="pglink"><a href="<%= url+"?page="+paginate.pageCount+"&"+query %>" rel="last">last ></a></span>

<%
//for a single page resultset
}else if(paginate.page==paginate.pageCount && !paginate.nextPage && !paginate.prevPage){    
%>
<span class="pglink"><< previous</span>  
<span class="pglink">next >></span>  

<%
//for last page of multi page resultset 
}else if(paginate.page==paginate.pageCount && !paginate.nextPage && paginate.prevPage){  
%>

<span class="pglink"><a href="<%= url+"?"+query %>">< first</a></span>
<span class="pglink"><a href="<%= url+"?page="+(paginate.page-1)+"&"+query %>"><< previous</a></span>
<span class="pglink">next ></span>  
<%  
}  
%>
</script>

you can play around with the template and also the data returned from your controller to change the data returned to create more complex templates with more jump links .

this was just a starting point to show a sample underscore,backbone pagination template .

code  for tutorial can be found at this repo