Created
February 2, 2011 20:53
-
-
Save Alxandr/808407 to your computer and use it in GitHub Desktop.
Pagination using jquery ui
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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