jQuery Pagination
by Alvin Olavarrieta
HTML
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div id="test" class="pagination"></div>
<div class="input-append">
<input class="span2" id="page" type="text" />
<button id="go" class="btn" type="button">Go!</button>
</div>
JavaScript
//methods for plugin constructor
var methods = {
reset: function () {
var html = '';
for (var i = 1; i <= settings.totalpages; i++) {
html = html + '<li data-page=' + i + '><a href="#">' + i + '</a></li>';
}
ul.html(html);
},
changePageNumber: function (a) {
methods.reset();
var html = '',
clickedValue = typeof(a) =='string' ? Number(a) : Number($(this).find('a').text()),
currentpage = clickedValue ? clickedValue : settings.defaultPage,
cutoff = settings.cutoff,
total = settings.totalpages,
pagination = ul.parent(),
li = pagination.find('li'),
startpoint = currentpage - cutoff,
endpoint = cutoff + currentpage;
var start = pagination.find('li:eq(' + startpoint + ')'),
end = pagination.find('li:eq(' + endpoint + ')');
startpoint >= 0 ? start.prevAll().not(li.first()).remove() : '';
endpoint >= 0 ? end.nextAll().not(li.last()).remove() : '';
var LiEmpty = '<li><a href="#">...</a></li>';
startpoint > 0 ? start.before(LiEmpty) : '';
endpoint < total - 1 ? end.after(LiEmpty) : '';
pagination.find('[data-page='+currentpage+']').addClass('active');
pagination.trigger('pagechange', [currentpage]);
},
init: function (config) {
settings = $.extend($.fn.pagination.defaults, config);
this.empty().append($('<ul/>'));
ul = this.find('ul');
methods.changePageNumber();
ul.on('click', 'li', methods.changePageNumber);
}
}
//Plugin Constructor
$.fn.pagination = function (methodOrOptions) {
if (methods[methodOrOptions]) {
return methods[methodOrOptions].apply($(this), Array.prototype.slice.call(arguments, 1));
} else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
// Default to "init"
return methods.init.apply($(this),...