Wednesday, July 3, 2013

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>

No comments:

Post a Comment