Bootstrap 'Digg-Style' Pagination template for Backbone

README.md

Boostrap Pagination Template

This is a template for creating Bootstrap pagination with Backbone.js and backbone.paginator.

Based on the Digg-Style Pagination script for PHP.

pagination.html

<script type="text/template" id="pagination">
    <ul class="pagination">
    <% 
    var adjacents = 1;

    if (currentPage > firstPage) { %>
    <li class="previous"><a href="#">«</a></li>
    <% } else { %>
    <li class="disabled"><a href="#">«</a></li>
    <% }

    if (totalPages < 7 + (adjacents * 2)) {
        for (p = 1; p <= totalPages; p++) {
            if (currentPage == p) { %>
                <li class="active"><a href="#"><%= p %></a></li>
            <% } else { %>
                <li class="page"><a href="#"><%= p %></a></li>
            <% }
        }
    } else if (totalPages >= 7 + (adjacents * 2)) {
        if(currentPage < 1 + (adjacents * 3)) {
            for (p = 1; p < 4 + (adjacents * 2); p++) {
                if (currentPage == p) { %>
                    <li class="active"><a href="#"><%= p %></a></li>
                <% } else { %>
                    <li class="page"><a href="#"><%= p %></a></li>
                <% }
            } %>
            <li class="disabled"><a href="#">&hellip;</a></li>
            <li class="page"><a href="#"><%= totalPages - 1 %></a></li>
            <li class="page"><a href="#"><%= totalPages %></a></li>
        <% } else if (totalPages - (adjacents * 2) > currentPage && currentPage > (adjacents * 2)) { %>
            <li class="page"><a href="#">1</a></li>
            <li class="page"><a href="#">2</a></li>
            <li class="disabled"><a href="#">&hellip;</a></li>
		<% for (p = currentPage - adjacents; p <= currentPage + adjacents; p++) {
                if (currentPage == p) { %>
                <li class="active"><a href="#"><%= p %></a></li>
                <% } else { %>
                <li class="page"><a href="#"><%= p %></a></li>
                <% }
		} %>
            <li class="disabled"><a href="#">&hellip;</a></li>
            <li class="page"><a href="#"><%= totalPages - 1 %></a></li>
            <li class="page"><a href="#"><%= totalPages %></a></li>
	<% } else { %>
            <li class="page"><a href="#">1</a></li>
            <li class="page"><a href="#">2</a></li>
            <li class="disabled"><a href="#">&hellip;</a></li>
		<% for (p = totalPages - (1 + (adjacents * 3)); p <= totalPages; p++) {
                if (currentPage == p) { %>
                <li class="active"><a href="#"><%= p %></a></li>
                <% } else { %>
                <li class="page"><a href="#"><%= p %></a></li>
                <% }
		}
	}
    }

    if (currentPage < totalPages) { %>
    <li class="next"><a href="#">»</a></li>
    <% } %>
    </ul>
</script>