Html Table Pagination: Real True and Complete (and Simple) Javascript with JQuery
i did a mixture and optimization from these 2:
http://gabrieleromanato.name/jquery-easy-table-pagination/
http://dotnetcluster.blogspot.co.il/2011/07/paging-in-html-table-using-javascript.html
now it has <<first, <<prev, 5,6,7,8,9 next>> last>>
i also added it to my Bresleveloper.js lib:
http://bresleveloper.blogspot.co.il/2013/06/my-extenxtion-javascript-namespace.html
<script type="text/javascript">
$(function () {
$('table.paginate').each(function () {
var $table = $(this);
var itemsPerPage = 10;
var currentPage = 0;
var pages = Math.ceil($table.find("tr:not(:has(th))").length / itemsPerPage);
$table.bind('repaginate', function () {
if (pages > 1) {
var pager;
if ($table.next().hasClass("pager"))
pager = $table.next().empty(); else
pager = $('<div class="pager" style="padding-top: 20px; direction:ltr; " align="center"></div>');
$('<span class="pg-goto"></span>').text(' « First ').bind('click', function () {
currentPage = 0;
$table.trigger('repaginate');
}).appendTo(pager);
$('<span class="pg-goto"> « Prev </span>').bind('click', function () {
if (currentPage > 0)
currentPage--;
$table.trigger('repaginate');
}).appendTo(pager);
var startPager = currentPage > 2 ? currentPage - 2 : 0;
var endPager = startPager > 0 ? currentPage + 3 : 5;
if (endPager > pages) {
endPager = pages;
startPager = pages - 5; if (startPager < 0)
startPager = 0;
}
for (var page = startPager; page < endPager; page++) {
$('<span id="pg' + page + '" class="' + (page == currentPage ? 'pg-selected' : 'pg-normal') + '"></span>').text(page + 1).bind('click', {
newPage: page
}, function (event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
}).appendTo(pager);
}
$('<span class="pg-goto"> Next » </span>').bind('click', function () {
if (currentPage < pages - 1)
currentPage++;
$table.trigger('repaginate');
}).appendTo(pager);
$('<span class="pg-goto"> Last » </span>').bind('click', function () {
currentPage = pages - 1;
$table.trigger('repaginate');
}).appendTo(pager);
if (!$table.next().hasClass("pager"))
pager.insertAfter($table);
}// end $table.bind('repaginate', function () { ...
$table.find(
'tbody tr:not(:has(th))').hide().slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage).show();
});
$table.trigger('repaginate');
});// end $('table.paginate').each(function () { ...
});
</script>
http://gabrieleromanato.name/jquery-easy-table-pagination/
http://dotnetcluster.blogspot.co.il/2011/07/paging-in-html-table-using-javascript.html
now it has <<first, <<prev, 5,6,7,8,9 next>> last>>
i also added it to my Bresleveloper.js lib:
http://bresleveloper.blogspot.co.il/2013/06/my-extenxtion-javascript-namespace.html
<script type="text/javascript">
$(function () {
$('table.paginate').each(function () {
var $table = $(this);
var itemsPerPage = 10;
var currentPage = 0;
var pages = Math.ceil($table.find("tr:not(:has(th))").length / itemsPerPage);
$table.bind('repaginate', function () {
if (pages > 1) {
var pager;
if ($table.next().hasClass("pager"))
pager = $table.next().empty(); else
pager = $('<div class="pager" style="padding-top: 20px; direction:ltr; " align="center"></div>');
$('<span class="pg-goto"></span>').text(' « First ').bind('click', function () {
currentPage = 0;
$table.trigger('repaginate');
}).appendTo(pager);
$('<span class="pg-goto"> « Prev </span>').bind('click', function () {
if (currentPage > 0)
currentPage--;
$table.trigger('repaginate');
}).appendTo(pager);
var startPager = currentPage > 2 ? currentPage - 2 : 0;
var endPager = startPager > 0 ? currentPage + 3 : 5;
if (endPager > pages) {
endPager = pages;
startPager = pages - 5; if (startPager < 0)
startPager = 0;
}
for (var page = startPager; page < endPager; page++) {
$('<span id="pg' + page + '" class="' + (page == currentPage ? 'pg-selected' : 'pg-normal') + '"></span>').text(page + 1).bind('click', {
newPage: page
}, function (event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
}).appendTo(pager);
}
$('<span class="pg-goto"> Next » </span>').bind('click', function () {
if (currentPage < pages - 1)
currentPage++;
$table.trigger('repaginate');
}).appendTo(pager);
$('<span class="pg-goto"> Last » </span>').bind('click', function () {
currentPage = pages - 1;
$table.trigger('repaginate');
}).appendTo(pager);
if (!$table.next().hasClass("pager"))
pager.insertAfter($table);
}// end $table.bind('repaginate', function () { ...
$table.find(
'tbody tr:not(:has(th))').hide().slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage).show();
});
$table.trigger('repaginate');
});// end $('table.paginate').each(function () { ...
});
</script>
Comments
Post a Comment