Skip to content

Instantly share code, notes, and snippets.

@Alxandr
Created February 2, 2011 20:53
Show Gist options
  • Save Alxandr/808407 to your computer and use it in GitHub Desktop.
Save Alxandr/808407 to your computer and use it in GitHub Desktop.
Pagination using jquery ui
/*
* jQuery UI Pagination 0.1.0
*
* By Alxandr
*/
(function( $, undefined ) {
var getAllElements = function(elem, excludeFirst) {
var elm = elem.get(0);
if(elm.tagName.toLowerCase() == 'table') {
var ret = $(elm.rows);
} else {
var ret = elem.children();
}
if(!excludeFirst) return ret;
return ret.filter(function(index) {
return index != 0;
});
};
$.widget('ui.pagination', {
options: {
items_per_page: 20,
prev: 'Prev',
next: 'Next',
exclude_first_row: false
},
_create: function() {
var self = this;
this.element
.wrap('<div class="ui-pagination" />').addClass('ui-pagination-paginated')
.parent().append('<ul class="ui-pagination-navigation ui-helper-clearfix" />');
this.nav = this.element.next('ul.ui-pagination-navigation');
this.allElements = getAllElements(this.element, this.options.exclude_first_row);
this.pages = Math.ceil(this.allElements.length / this.options.items_per_page) || 1;
$('<li class="ui-pagination-pagelink"><a href="#pagination">' + this.options.prev + '</a></li>')
.find('a').data('ui-pagination-page', 'prev').end()
.appendTo(this.nav);
for(var i = 0; i < this.pages; i++) {
$('<li class="ui-pagination-pagelink"><a href="#pagination">' + (i + 1) + '</a></li>')
.find('a').data('ui-pagination-page', i).end()
.appendTo(this.nav);
}
$('<li class="ui-pagination-pagelink"><a href="#pagination">' + this.options.next + '</a></li>')
.find('a').data('ui-pagination-page', 'next').end()
.appendTo(this.nav);
this.pagelinks = this.nav.find('li.ui-pagination-pagelink');
this.pagelinks.find('a').bind('click', function(e) {
e.preventDefault();
self.selectPage($(this).data('ui-pagination-page'));
});
this.allElements.detach();
this.selected = -1;
this.selectPage('first');
},
selectPage: function(which) {
if(which == 'first') {
which = 0;
} else if(which == 'last') {
which = this.pages - 1;
} else if (which == 'next') {
which = Math.min(this.pages - 1, this.selected + 1);
} else if (which == 'prev') {
which = Math.max(0, this.selected - 1);
}
if(which == this.selected) return this.element;
var o = this.options;
this.allElements.detach().filter(function(index) {
return index >= which * o.items_per_page && index < (which + 1) * o.items_per_page;
}).appendTo(this.element);
this.pagelinks.removeClass('ui-state-highlight').filter(':eq(' + (which + 1) + ')').addClass('ui-state-highlight');
this.selected = which;
return this.element;
}
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment