前端分页实现

最近做de一个项目，整个页面的数据更新要纯ajax实现，没办法，连分页都得由我来写了，基本思路还是像后台那样实现分页，后台实现分页其实也就是用后台的程序来处理那段分页的模版，于是我想

到了用js自己来解析那段类似的分页模版，正好以前自己也做了js模版引擎（http://www.cnblogs.com/hust/archive/2011/04/28/2032265.html），刚好派上用场，

下面是分页的模版：

 {{if(data.totalpage>1){ }}
                {{ if(data.curpage!=1){}}
           <li><a href="javascript:void(0)" class="previous_page" onclick="Ybole.page.previous()">上一页</a></li>
          {{  }  }}
          {{for(var a=parseInt((data.curpage-1)/Ybole.page.perpage)*Ybole.page.perpage,i=a+1;i<=Math.min(a+Ybole.page.perpage,data.totalpage);i++){}}
         <li>
         <a href="javascript:void(0)" onclick="Ybole.page.goto({{=i}})" {{ if(data.curpage==i){}} class="hover" {{ } }}>{{=i}}</a>
         </li>
          {{  } }} 
         {{ if(Math.ceil(data.totalpage/Ybole.page.perpage)!= Math.ceil(data.curpage/Ybole.page.perpage)){  }}
        <li>
         <a href="javascript:void(0)" class="nopage">...</a>
         </li>
         {{  }  }}
         {{ if(data.curpage!=data.totalpage){  }}
        <li ><a href="javascript:void(0)" class="next_page" onclick="Ybole.page.next()">下一页</a></li>
         {{  }  }}
        {{   }  }}

一下是模版处理代码

var pageTpl=Template({
            tpl:$('#pagetpl')[0].text,
         data:{curpage:1,totalpage:1}
         });  

Ybole.page={
					   	curpage:1,
						totalpage:1,
						perpage:10,//每页显示的条数
						previous:function(){
						  this.goto(--this.curpage);
						},
						next:function(){
						  this.goto(++this.curpage);
						},
						goto:function(n){
						  this.curpage=n;
						  dosomething();

						  $('#page').html(pageTpl.render({curpage:n}));
						}
				    }