Paginación de tabla HTML con jQuery

publicado por: Anonymous

Estoy practicando como paginar una tabla html usando jquery, encontré este código para hacerlo como una libreria jquery. Sin embargo la paginación se realiza poniendole un id al tbody, y lo que quiero es hacerlo usando un id directamente en la tabla.

A continuación dejo el código funcional:

_x000D_

_x000D_

$.fn.pageMe = function(opts){_x000D_
    var $this = this,_x000D_
        defaults = {_x000D_
            perPage: 7,_x000D_
            showPrevNext: false,_x000D_
            hidePageNumbers: false_x000D_
        },_x000D_
        settings = $.extend(defaults, opts);_x000D_
    _x000D_
    var listElement = $this;_x000D_
    var perPage = settings.perPage; _x000D_
    var children = listElement.children();_x000D_
    var pager = $('.pager');_x000D_
    _x000D_
    if (typeof settings.childSelector!="undefined") {_x000D_
        children = listElement.find(settings.childSelector);_x000D_
    }_x000D_
    _x000D_
    if (typeof settings.pagerSelector!="undefined") {_x000D_
        pager = $(settings.pagerSelector);_x000D_
    }_x000D_
    _x000D_
    var numItems = children.size();_x000D_
    var numPages = Math.ceil(numItems/perPage);_x000D_
_x000D_
    pager.data("curr",0);_x000D_
    _x000D_
    if (settings.showPrevNext){_x000D_
        $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);_x000D_
    }_x000D_
    _x000D_
    var curr = 0;_x000D_
    while(numPages > curr && (settings.hidePageNumbers==false)){_x000D_
        $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);_x000D_
        curr++;_x000D_
    }_x000D_
    _x000D_
    if (settings.showPrevNext){_x000D_
        $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);_x000D_
    }_x000D_
    _x000D_
    pager.find('.page_link:first').addClass('active');_x000D_
    pager.find('.prev_link').hide();_x000D_
    if (numPages<=1) {_x000D_
        pager.find('.next_link').hide();_x000D_
    }_x000D_
  	pager.children().eq(1).addClass("active");_x000D_
    _x000D_
    children.hide();_x000D_
    children.slice(0, perPage).show();_x000D_
    _x000D_
    pager.find('li .page_link').click(function(){_x000D_
        var clickedPage = $(this).html().valueOf()-1;_x000D_
        goTo(clickedPage,perPage);_x000D_
        return false;_x000D_
    });_x000D_
    pager.find('li .prev_link').click(function(){_x000D_
        previous();_x000D_
        return false;_x000D_
    });_x000D_
    pager.find('li .next_link').click(function(){_x000D_
        next();_x000D_
        return false;_x000D_
    });_x000D_
    _x000D_
    function previous(){_x000D_
        var goToPage = parseInt(pager.data("curr")) - 1;_x000D_
        goTo(goToPage);_x000D_
    }_x000D_
     _x000D_
    function next(){_x000D_
        goToPage = parseInt(pager.data("curr")) + 1;_x000D_
        goTo(goToPage);_x000D_
    }_x000D_
    _x000D_
    function goTo(page){_x000D_
        var startAt = page * perPage,_x000D_
            endOn = startAt + perPage;_x000D_
        _x000D_
        children.css('display','none').slice(startAt, endOn).show();_x000D_
        _x000D_
        if (page>=1) {_x000D_
            pager.find('.prev_link').show();_x000D_
        }_x000D_
        else {_x000D_
            pager.find('.prev_link').hide();_x000D_
        }_x000D_
        _x000D_
        if (page<(numPages-1)) {_x000D_
            pager.find('.next_link').show();_x000D_
        }_x000D_
        else {_x000D_
            pager.find('.next_link').hide();_x000D_
        }_x000D_
        _x000D_
        pager.data("curr",page);_x000D_
      	pager.children().removeClass("active");_x000D_
        pager.children().eq(page+1).addClass("active");_x000D_
    _x000D_
    }_x000D_
};_x000D_
_x000D_
$(document).ready(function(){_x000D_
    _x000D_
  $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});_x000D_
    _x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<table class="table table-hover">_x000D_
  <thead>_x000D_
    <tr>_x000D_
      <th>#</th>_x000D_
      <th>Table heading</th>_x000D_
      <th>Table heading</th>_x000D_
      <th>Table heading</th>_x000D_
      <th>Table heading</th>_x000D_
      <th>Table heading</th>_x000D_
      <th>Table heading</th>_x000D_
    </tr>_x000D_
  </thead>_x000D_
  <tbody id="myTable">_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>2</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>3</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>4</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr class="success">_x000D_
      <td>5</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>6</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>7</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
     <tr>_x000D_
      <td>8</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>9</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>10</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
  </tbody>_x000D_
</table>  _x000D_
_x000D_
<ul class="pagination pagination-lg pager" id="myPager"></ul>

_x000D_

_x000D_

_x000D_

¿Qué podría hacer para en vez de usar un id en <tbody>, usar un id en <table> ?

solución

Para podes usar el selector de una tabla, lo mas fácil sería modificar el valor de la variable listElement, por:

var listElement = $this.find('tbody');

De esta forma, el valor de $this puede ser el table, y los elementos a paginar los buscara en el tbody.

Ejemplo:

_x000D_

_x000D_

$.fn.pageMe = function(opts){_x000D_
    var $this = this,_x000D_
        defaults = {_x000D_
            perPage: 7,_x000D_
            showPrevNext: false,_x000D_
            hidePageNumbers: false_x000D_
        },_x000D_
        settings = $.extend(defaults, opts);_x000D_
    _x000D_
    var listElement = $this.find('tbody');_x000D_
    var perPage = settings.perPage; _x000D_
    var children = listElement.children();_x000D_
    var pager = $('.pager');_x000D_
    _x000D_
    if (typeof settings.childSelector!="undefined") {_x000D_
        children = listElement.find(settings.childSelector);_x000D_
    }_x000D_
    _x000D_
    if (typeof settings.pagerSelector!="undefined") {_x000D_
        pager = $(settings.pagerSelector);_x000D_
    }_x000D_
    _x000D_
    var numItems = children.size();_x000D_
    var numPages = Math.ceil(numItems/perPage);_x000D_
_x000D_
    pager.data("curr",0);_x000D_
    _x000D_
    if (settings.showPrevNext){_x000D_
        $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);_x000D_
    }_x000D_
    _x000D_
    var curr = 0;_x000D_
    while(numPages > curr && (settings.hidePageNumbers==false)){_x000D_
        $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);_x000D_
        curr++;_x000D_
    }_x000D_
    _x000D_
    if (settings.showPrevNext){_x000D_
        $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);_x000D_
    }_x000D_
    _x000D_
    pager.find('.page_link:first').addClass('active');_x000D_
    pager.find('.prev_link').hide();_x000D_
    if (numPages<=1) {_x000D_
        pager.find('.next_link').hide();_x000D_
    }_x000D_
  	pager.children().eq(1).addClass("active");_x000D_
    _x000D_
    children.hide();_x000D_
    children.slice(0, perPage).show();_x000D_
    _x000D_
    pager.find('li .page_link').click(function(){_x000D_
        var clickedPage = $(this).html().valueOf()-1;_x000D_
        goTo(clickedPage,perPage);_x000D_
        return false;_x000D_
    });_x000D_
    pager.find('li .prev_link').click(function(){_x000D_
        previous();_x000D_
        return false;_x000D_
    });_x000D_
    pager.find('li .next_link').click(function(){_x000D_
        next();_x000D_
        return false;_x000D_
    });_x000D_
    _x000D_
    function previous(){_x000D_
        var goToPage = parseInt(pager.data("curr")) - 1;_x000D_
        goTo(goToPage);_x000D_
    }_x000D_
     _x000D_
    function next(){_x000D_
        goToPage = parseInt(pager.data("curr")) + 1;_x000D_
        goTo(goToPage);_x000D_
    }_x000D_
    _x000D_
    function goTo(page){_x000D_
        var startAt = page * perPage,_x000D_
            endOn = startAt + perPage;_x000D_
        _x000D_
        children.css('display','none').slice(startAt, endOn).show();_x000D_
        _x000D_
        if (page>=1) {_x000D_
            pager.find('.prev_link').show();_x000D_
        }_x000D_
        else {_x000D_
            pager.find('.prev_link').hide();_x000D_
        }_x000D_
        _x000D_
        if (page<(numPages-1)) {_x000D_
            pager.find('.next_link').show();_x000D_
        }_x000D_
        else {_x000D_
            pager.find('.next_link').hide();_x000D_
        }_x000D_
        _x000D_
        pager.data("curr",page);_x000D_
      	pager.children().removeClass("active");_x000D_
        pager.children().eq(page+1).addClass("active");_x000D_
    _x000D_
    }_x000D_
};_x000D_
_x000D_
$(document).ready(function(){_x000D_
    _x000D_
  $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});_x000D_
    _x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<table id="myTable" class="table table-hover">_x000D_
  <thead>_x000D_
    <tr>_x000D_
      <th>#</th>_x000D_
      <th>Table heading</th>_x000D_
      <th>Table heading</th>_x000D_
      <th>Table heading</th>_x000D_
      <th>Table heading</th>_x000D_
      <th>Table heading</th>_x000D_
      <th>Table heading</th>_x000D_
    </tr>_x000D_
  </thead>_x000D_
  <tbody>_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>2</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>3</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>4</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr class="success">_x000D_
      <td>5</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>6</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>7</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
     <tr>_x000D_
      <td>8</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>9</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>10</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
      <td>Table cell</td>_x000D_
    </tr>_x000D_
  </tbody>_x000D_
</table>  _x000D_
_x000D_
<ul class="pagination pagination-lg pager" id="myPager"></ul>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *