In questo articolo realizzeremo un plugin jQuery che ci permetta di implementare una tabella HTML con scrollbar incorporata.
In altre parole la nostra tabella avrà fissa l’intestazione (thead) e il fondo (tfoot) mentre la parte centrale (tbody) sarà scrollabile in un box con altezza da noi definita.

Iniziamo subito lo sviluppo del plugin, che chiameremo “tScroll“, determinando l’unico parametro da passare alla funzione:

• h_box: altezza scroll della tabella

Una volta terminato il lavoro vorremmo poter invocare su una tabella con id=myTable il plugin con questa sintassi:

$('#myTable').tScroll({
      h_box: '300px'
});

Ottenendo ad esempio il seguente risultato:

Introduciamo il codice del plugin che successivamente commenteremo:

(function($){  
    $.fn.tScroll = function(options) {    
    return this.each(function() {
        // Recupero info tabella
        options.id_table = $(this).attr('id');
        var border = $('#'+options.id_table).attr('border');
        var cellspacing = $('#'+options.id_table).attr('cellspacing');
        var cellpadding = $('#'+options.id_table).attr('cellpadding');
        var classe = $('#'+options.id_table).attr('class');
        
        // Fisso thead
        var colonne = $('#'+options.id_table+' thead th').length;
        for(var i=0; i<colonne; i++){
            var w_th=$('#'+options.id_table+' thead th').eq(i).css('width').replace('px','');
            $('#'+options.id_table+' thead th').eq(i).css('width',w_th+'px');    
        }
        
        // Fisso tbody
        var colonne = $('#'+options.id_table+' tbody tr:eq(0) td').length;
        for(var i=0; i<colonne; i++){
            var w_th=$('#'+options.id_table+' tbody tr:eq(0) td').eq(i).width();
            $('#'+options.id_table+' tbody tr:eq(0) td').eq(i).width(w_th);    
        }
        
		var table2 = "";
        // Verifico se presente un tfoot
        if($('#'+options.id_table+' tfoot').length>0){
            // Fisso tfoot
            var colonne = $('#'+options.id_table+' tfoot td').length;
            for(var i=0; i<colonne; i++){
                var w_th=$('#'+options.id_table+' tfoot td').eq(i).css('width');
                $('#'+options.id_table+' tfoot td').eq(i).css('width',w_th);    
            }
			
			table2 = "<table id='tScroll_t2_"+options.id_table+"' border='"+border+"' cellspacing='"+cellspacing+"' cellpadding='"+cellpadding+"' class='"+classe+"'><tfoot>"+$('#'+options.id_table+' tfoot').html()+"</tfoot></table>";
        }
        
		var tbox = "<div id='tScroll_box_"+options.id_table+"'></div>";
        var table1 = "<table id='tScroll_t1_"+options.id_table+"' border='"+border+"' cellspacing='"+cellspacing+"' cellpadding='"+cellpadding+"' class='"+classe+"'><thead>"+$('#'+options.id_table+' thead').html()+"</thead></table>";
        var div = "<div id='tScroll_body_"+options.id_table+"'></div>";
		
        // Compongo le tre tabella in sequenza
        $(tbox).insertBefore('#'+options.id_table);
        $('#tScroll_box_'+options.id_table).append(table1);
        $('#tScroll_box_'+options.id_table).append(div);
        $('#tScroll_box_'+options.id_table).append(table2);
        
        $('#tScroll_body_'+options.id_table).append($('#'+options.id_table));
        
        $('#'+options.id_table).css('marginTop',0);
        $('#'+options.id_table).css('marginBottom',0);
        $('#'+options.id_table+" thead").remove();
        $('#'+options.id_table+" tfoot").remove();
        
        var w = $('#'+options.id_table).width() + 18;
        // Applico al box centrale l'altezza prefissata
        $('#tScroll_body_'+options.id_table).css('width',w)
                          .css('height',options.h_box)
                          .css('padding','0px')
                          .css('margin','0px')
                          .css('overflow-y','scroll')
                          .css('text-align','left');
		
		$('#tScroll_box_'+options.id_table).css('width',w)
										   .css('padding','0px')
										   .css('margin','0px')
										   .css('text-align','left');
    });
    
    return false;
    
    };  
})(jQuery);

Analizziamo il codice focalizzando l’attenzione innanzitutto sulla sequenza di operazioni che vengono compiute:

1. Recuperiamo alcune info dalla tabella, ad esempio l’eventuale bordo la classe e attributi come cellspacing e cellpadding
2. Intercettiamo il THEAD della tabella e fissiamo la larghezza delle celle
3. Intercettiamo il TBODY della tabella e fissiamo la largehzza delle celle
4. Intercettiamo (se presente) il TFOOT della tabella e fissiamo la larghezza delle celle
5. Estraiamo i tre blocchi che compongono la tabella e inseriamoli in 3 tabelle diverse, mantenendo la giusta sequenza (una tabella con il solo THEAD, una tabella con il solo TBODY e una tabella con il solo TFOOT)
6. Alla tabella centrale (la tabella del TBODY) applichiamo l’altezza definita in h_box e impostiamo lo scroll dell’asse y

In altre parole il concetto di base racchiuso nel nostro plugin è così riassumibile:

dopo aver bloccato la larghezza delle cella che compongono la tabella, creiamo 3 tabelle in sequenza ognuna contenente una parte della tabella originale (thead, tbody, tfoot) e quindi solo alla tabella centrale fissiamo l’altezza in pixel e il conseguente scroll.

Più precisamente la tabella centrale contenente il body viene prima racchiuso -per comodità- in un DIV al quale poi tramite il metodo .css di jQuery viene fissata l’altezza (righe da 55 a 62):

var w = $('#'+options.id_table).width() + 18;

$('#tScroll_body_'+options.id_table).css('width',w)
                          .css('height',options.h_box)
                          .css('padding','0px')
                          .css('margin','0px')
                          .css('overflow-y','scroll')
                          .css('text-align','left');

Da notare che ogni tabella/blocco creato avrà un suo ID composto.
Inoltre la larghezza del box terrà conto dello spazio occupato dallo scroll aggiungendo 18px mentre l’altezza sarà il valore del parametro in option.h_box.

Chiaramente, come sempre, tengo a sottolineare che questa è solo una possibile soluzione dello spinoso problema riguardante le tabelle con scroll. Chi sviluppa quotidianamente per il web si sarà almeno una volta trovato dinnanzi questa richiesta da parte del committente e fortunatamente in rete sono proposte molte soluzioni, alcune ottime altre invece “poco funzionanti”.
La strada che abbiamo percorso è forse la più semplice e ovvia ma sicuramente è anche ottimizzabile e migliorabile.

Infine, qualora ce ne fosse bisogno, tengo a precisare che per il corretto funzionamento del plugin tScroll è necessario che la nostra tabella di partenza sia strutturata tenendo conto della presenza del tag thead, del tag tbody ed eventualmente del tag tfoot. Inoltre le celle che compongono l’intestazione (thead) devono essere definite utilizzando il tag TH; ciò comunque non toglie che il codice può essere facilmente modificato per essere adattato alle nostre tabelle esistenti.

Cliccando qui è possibile vedere in azione il plugin tScroll.

Cliccando qui è possibile scaricare il codice del plugin tScroll.