¿Cómo usar la paginación en tablas HTML?

Eduardo, miembro de este staff, nos hizo el favor de escribir esta reseña ya que domina muy bien el tema.

Solución:

Muchas veces es posible que queramos realizar la paginación de tablas usando jquery. Aquí te daré la respuesta y el enlace de referencia.

jquery

  $(document).ready(function()
        $('#data').after('
');
        var rowsShown = 4;
        var rowsTotal = $('#data tbody tr').length;
        var numPages = rowsTotal/rowsShown;
        for(i = 0;i < numPages;i++) 
            var pageNum = i + 1;
            $('#nav').append(''+pageNum+' ');
        
        $('#data tbody tr').hide();
        $('#data tbody tr').slice(0, rowsShown).show();
        $('#nav a:first').addClass('active');
        $('#nav a').bind('click', function()

            $('#nav a').removeClass('active');
            $(this).addClass('active');
            var currPage = $(this).attr('rel');
            var startItem = currPage * rowsShown;
            var endItem = startItem + rowsShown;
            $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
                    css('display','table-row').animate(opacity:1, 300);
        );
    );

JSfiddle: https://jsfiddle.net/u9d1ewsh/

Es una utilidad muy simple y efectiva construida en jquery para implementar la paginación en la tabla html http://tablesorter.com/docs/example-pager.html

Descargue el complemento desde http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js

Después de agregar este complemento, agregue el siguiente código en el script principal

$(document).ready(function()  
    $("table") 
    .tablesorter(widthFixed: true, widgets: ['zebra']) 
    .tablesorterPager(container: $("#pager")); 
); 

Para mí, la mejor y más sencilla manera, Bootply http://www.bootply.com/lxa0FF9yhw#

Primero incluye Bootstrap a tu proyecto

Luego incluya el archivo javascript en el que escribe este código:

    $.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)
        $('
«
').appendTo(pager);
    

    var curr = 0;
    while(numPages > curr && (settings.hidePageNumbers==false))
        $('
'+(curr+1)+'
').appendTo(pager);
        curr++;
    

    if (settings.showPrevNext)
        $('
»
').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")) - 1;
        goTo(goToPage);
    

    function next()
        goToPage = parseInt(pager.data("curr")) + 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");

    
;

Debe proporcionar una identificación al cuerpo de su tabla y agregar un 'div' después de la tabla para la paginación

     

            

                

                    
...
                
            
            

            
       
       

           

       

Cuando se carguen los datos de su tabla, simplemente llame a esto

$('#myTableBody').pageMe(pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4);

donde el valor 'por página' es establecer cuántos elementos por página desea tener.

---

---

Utiliza Nuestro Buscador