maxicecilia
6/25/2014 - 12:20 AM

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.

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.

pagination-example.html
content_copyfile_download
<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>
paginate.js
content_copyfile_download
$.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");

    }
};