Skip to content

Instantly share code, notes, and snippets.

@maxicecilia
Created June 25, 2014 00:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maxicecilia/c090507fc67ad811b164 to your computer and use it in GitHub Desktop.
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.
$.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");
}
};
<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