分页JS 模板

[mishe]

分页模板（underscore）

<div class="pages">
<% if(countPage<5){
    for(var i=1;i<=countPage;i++){ %>
    <a href="javascript:;" data-id="<%=i%>" class="<%=curPage==i?'curPage':''%>"><%=i%></a>
<% }
}else{
    if(curPage<5){
        for (var i = 1; i <5; i++) { %>
        <a href="javascript:;" data-id="<%=i%>" class="<%=curPage==i?'curPage':''%>"><%=i%></a>
       <% } %>
        ...<a href="javascript:;" data-id="<%=countPage%>"><%=countPage%></a>
   <% }else if(curPage>4 && curPage<countPage-3){ %>
        <a href="javascript:;" data-id="1">1</a>...
        <% for (var i = curPage-2; i <= curPage+2; i++) { %>
        <a href="javascript:;" data-id="<%=i%>" class="<%=curPage==i?'curPage':''%>"><%=i%></a>
        <% } %>
        ...<a href="javascript:;" data-id="<%=countPage%>"><%=countPage%></a>
    <% }else{ %>
        <a href="javascript:;" data-id="1">1</a>...
        <% for (var i = countPage-4; i <= countPage; i++) { %>
        <a href="javascript:;" data-id="<%=i%>" class="<%=curPage==i?'curPage':''%>"><%=i%></a>
    <% }
    }
}
if(pageSize>0 && countPage>0){ %>
    每页显示 <select>
                <option value="10"<%=pageSize==10?' selected':''%>>10</option>
                <option value="20"<%=pageSize==20?' selected':''%>>20</option>
                <option value="40"<%=pageSize==40?' selected':''%>>40</option>
                <option value="100"<%=pageSize==100?' selected':''%>>100</option>
            </select>

    跳转到<input type="text" value="<%=curPage%>">
    <% }%>
</div>

需要传入参数：

pages.countPage=Math.floor(len/pageSize)+(len%pageSize>0?1:0);
                pages.curPage=parseInt(page);
                pages.pageSize=0;
                $('#pages').html(_.template(pageTemplate,pages));
events:{
                'click .pages a':'pages',
                'change .pages select':'changePageSize',
                'blur .pages input':'gotoInputPage',
            },
            pages:function(event){
                var self=$(event.currentTarget);
                this.render(self.attr('data-id'));
            },
            changePageSize:function(event){
                var self=$(event.currentTarget);
                this.pageSize=self.val();
                this.render();
            },
            gotoInputPage:function(event){
                var self=$(event.currentTarget);
                this.render(self.val());
            }