Created
June 25, 2014 00:20
-
-
Save maxicecilia/c090507fc67ad811b164 to your computer and use it in GitHub Desktop.
Quick and simple pagination script.
I stole this somewhere... I don't remember where or to whom, so all the credit goes to Chuck Norris.
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
$.fn.pageMe = function (opts) { | |
var $this = this, | |
defaults = { | |
perPage: 7, | |
showPrevNext: false, | |
hidePageNumbers: false | |
}, | |
settings = $.extend(defaults, opts); | |
var listElement = $this; | |
var perPage = settings.perPage; | |
var children = listElement.children(); | |
var pager = $('.pager'); | |
if (typeof settings.childSelector != "undefined") { | |
children = listElement.find(settings.childSelector); | |
} | |
if (typeof settings.pagerSelector != "undefined") { | |
pager = $(settings.pagerSelector); | |
} | |
var numItems = children.size(); | |
var numPages = Math.ceil(numItems / perPage); | |
pager.data("curr", 0); | |
if (settings.showPrevNext) { | |
$('<li><a href="#" class="prev_link">« Anterior </a></li>').appendTo(pager); | |
} | |
var curr = 0; | |
while (numPages > curr && (settings.hidePageNumbers === false)) { | |
$('<li><a href="#" class="page_link">' + (curr + 1) + '</a></li>').appendTo(pager); | |
curr++; | |
} | |
if (settings.showPrevNext) { | |
$('<li><a href="#" class="next_link"> Siguiente »</a></li>').appendTo(pager); | |
} | |
pager.find('.page_link:first').addClass('active'); | |
pager.find('.prev_link').hide(); | |
if (numPages <= 1) { | |
pager.find('.next_link').hide(); | |
} | |
pager.children().eq(1).addClass("active"); | |
children.hide(); | |
children.slice(0, perPage).show(); | |
pager.find('li .page_link').click(function () { | |
var clickedPage = $(this).html().valueOf() - 1; | |
goTo(clickedPage, perPage); | |
return false; | |
}); | |
pager.find('li .prev_link').click(function () { | |
previous(); | |
return false; | |
}); | |
pager.find('li .next_link').click(function () { | |
next(); | |
return false; | |
}); | |
function previous() { | |
var goToPage = parseInt(pager.data("curr"), 10) - 1; | |
goTo(goToPage); | |
} | |
function next() { | |
goToPage = parseInt(pager.data("curr"), 10) + 1; | |
goTo(goToPage); | |
} | |
function goTo(page) { | |
var startAt = page * perPage, | |
endOn = startAt + perPage; | |
children.css('display', 'none').slice(startAt, endOn).show(); | |
if (page >= 1) { | |
pager.find('.prev_link').show(); | |
} | |
else { | |
pager.find('.prev_link').hide(); | |
} | |
if (page < (numPages - 1)) { | |
pager.find('.next_link').show(); | |
} | |
else { | |
pager.find('.next_link').hide(); | |
} | |
pager.data("curr", page); | |
pager.children().removeClass("active"); | |
pager.children().eq(page + 1).addClass("active"); | |
} | |
}; |
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
<table> | |
<thead> | |
<tr> | |
<th>#</th> | |
<th>name</th> | |
<th>age</th> | |
</tr> | |
</thead> | |
<tbody id="paginate-this"> | |
<tr> | |
<td>1</td> | |
<td>Mike</td> | |
<td>42</td> | |
</tr> | |
// ... more rows | |
<tr> | |
<td>2</td> | |
<td>John</td> | |
<td>24</td> | |
</tr> | |
</tbody> | |
</table> | |
<ul id="table-paginator" class="pagination"></ul> | |
<script> | |
$(document).ready(function () { | |
$('#paginate-this').pageMe({ | |
pagerSelector: '#table-paginator', | |
showPrevNext: true, | |
hidePageNumbers: false, | |
perPage: 20 | |
}); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment