Paginador

by Christian Unigarro

HTML

<ul id="pager"></ul>

CSS

#pager { margin: 20px; }
#pager a { text-decoration: none; color: black; }
#pager  li { text-decoration: none; width: 20px; text-align: center; list-style-type: none; float: left; margin-left: 5px; }
#pager  a li { border: 1px solid gray; border-radius: 3px; text-decoration: none; width: 20px; text-align: center; list-style-type: none; float: left; margin-left: 5px; }

JavaScript

var totalPages = 50, buttons = 3;
var currentPage = lowerLimit = upperLimit = Math.min(2, totalPages);

for (var b = 1; b < buttons && b < totalPages;) {
    if (lowerLimit > 1 ) { lowerLimit--; b++; }
    if (b < buttons && upperLimit < totalPages) { upperLimit++; b++; }
}

for (var i = lowerLimit; i <= upperLimit; i++) {
		$('#pager').append('<a class="btnPrev><</a> ');
    
    if (i == currentPage) $('#pager').append('<li>' + i + '</li> ');
    else $('#pager').append('<a href="#"><li><em>' + i + '</em></li></a> ');
    
    $('#pager').append('<a class="btnPrev><</a> ');
}