pagination ui backbone, underscore

paginationView.html

        <% if(paginationInfo != undefined) { %>
        <ul class="pagination">
            <% var currentPage = paginationInfo.pageNumber,
                   lastPage = paginationInfo.totalCount==0?1:Math.ceil(paginationInfo.totalCount/paginationInfo.perPage),
                   /*pageRange represents pages on both sides of the current page.*/
                   pageRange = 2;
                   debugger;
                    /*values to be used in main loop*/
                    var rangeStart = currentPage - pageRange;
                    var rangeEnd = currentPage + pageRange;
                    /*if rangeEnd larger that lastPage, need fix*/
                    if (rangeEnd > lastPage) {
                       rangeEnd = lastPage;
                       rangeStart = lastPage - pageRange * 2;
                       rangeStart = rangeStart < 1 ? 1 : rangeStart;
                    }
                    /*if rangeStart less that 1, need fix*/
                    if (rangeStart <= 1) {
                       rangeStart = 1;
                       rangeEnd = Math.min(pageRange * 2 + 1, lastPage);
                    }
            %>
            <li class="<%= currentPage == 1?'disabled':'' %>" data-pb-page-number="<%= currentPage == 1?1:currentPage-1 %>"><a href="#" class="prev" title="previous">&laquo;</a></li>
            <!--its worth to have ellipsis the rangeStart is 4 of above-->
            <% if (rangeStart <= 3) {
                for (var i = 1; i < rangeStart; i++) {%>
                    <li class="<%= currentPage == i?'active':'' %>" data-pb-page-number="<%= i %>"><a href="#" class="page"><%= i %></a></li>
                <%}%>
            <% } else { %>
            <li class="<%= currentPage == 1?'disabled':'' %>" data-pb-page-number="1"><a href="#" class="first" title="first page">1</a></li>
            <li class="ellipsis disabled" ><a class="ellipsis" title="">...</a></li>
            <% } %>
            <!--main loop-->
            <% for (var i = rangeStart; i <= rangeEnd; i++) {%>
               <li class="<%= currentPage == i?'active':'' %>" data-pb-page-number="<%= i %>"><a href="#" class="page"><%= i %></a></li>
            <% }%>

            <% if (rangeEnd >= lastPage - 2) {
                for (var i = rangeEnd + 1; i <= lastPage; i++) {%>
                   <li class="<%= currentPage == i?'active':'' %>" data-pb-page-number="<%= i %>"><a href="#" class="page"><%= i %></a></li>
                <%}%>
            <% } else { %>
                <li class="ellipsis disabled" ><a class="ellipsis" title="">...</a></li>
                <li class="<%= lastPage == currentPage?'disabled':'' %>" data-pb-page-number="<%= lastPage %>"><a href="#" class="last" title="last page"><%= lastPage %></a></li>
            <% }%>
            <li class="<%= lastPage == currentPage?'disabled':'' %>" data-pb-page-number="<%= currentPage==lastPage?lastPage:currentPage+1 %>"><a href="#" class="next" title="next">&raquo;</a></li>
        </ul>
        <% } %>
    </div>

this will create somthing like

thanks to
https://github.com/superRaytin/paginationjs