Skip to content

Instantly share code, notes, and snippets.

@jonkemp
Last active Aug 29, 2015
Embed
What would you like to do?
Bootstrap 'Digg-Style' Pagination template for Backbone
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment