jQuery: ordinare una tabella alfabeticamente

  • jQuery
  • Gabriele Romanato

L'ordinamento di una tabella (table sorting) con jQuery richiede l'uso del metodo JavaScript sort() dell'oggetto Array. Per impostazione predefinita, questo metodo restituisce un ordinamento naturale degli elementi di un array. Tuttavia, questo metodo accetta anche una funzione di callback con cui è possibile modificare il tipo di ordinamento restituito. Vedremo infatti come usare questo metodo per ordinare le colonne di una tabella alfabeticamente.

Abbiamo una tabella a due colonne contenente titoli e registi di alcuni film. Quello che dobbiamo fare è questo:

  1. trasformare gli elementi tr della tabella in un array usando il metodo get()
  2. usare il metodo sort() sulle righe ottenute paragonando tra di loro i contenuti testuali delle prime celle di ciascuna riga (se stiamo selezionando la prima colonna) o delle seconde celle di ciascuna riga (se stiamo selezionando la seconda colonna)
  3. usare il metodo append() sull'array ordinato di righe aggiungendo ciascuna riga al corpo della tabella.

Ciascuna intestazione della tabella contiene un link che, una volta cliccato, eseguirà le azioni citate:


$(document).ready(function() {

  $('#movies #title').click(function(e) {
  
    var rows = $('#movies tbody  tr').get();
    
    
    rows.sort(function(a, b) {
    
      var A = $(a).children('td').eq(0).text().toUpperCase();
      var B = $(b).children('td').eq(0).text().toUpperCase();
      
      if(A < B) {
        return -1;
      }
      
      if(A > B) {
        return 1;
      }
      
      return 0;     
    
    
    });
    
    
    
    
    
    
    $.each(rows, function(index, row) {
    
      $('#movies').children('tbody').append(row);
      
          
    
    
    });
  
  
    e.preventDefault();
  
  });
  
  
  $('#movies #director').click(function(e) {
  
    var rows = $('#movies tbody  tr').get();
    
    
    rows.sort(function(a, b) {
    
      var A = $(a).children('td').eq(1).text().toUpperCase();
      var B = $(b).children('td').eq(1).text().toUpperCase();
      
      if(A < B) {
        return -1;
      }
      
      if(A > B) {
        return 1;
      }
      
      return 0;     
    
    
    });
    
    
    
    
    
    
    $.each(rows, function(index, row) {
    
      $('#movies').children('tbody').append(row);
      
          
    
    
    });
  
  
    e.preventDefault();
  
  });




});

L'ordinamento tramite sort() prevede che i contenuti testuali delle celle vengano normalizzati trasformando tutte le lettere in lettere maiuscole. Tale metodo restituirà -1, 1 o 0 a seconda del risultato ottenuto dalla comparazione (0 indica che le stringhe sono uguali). Potete visionare l'esempio finale in questa pagina.

Torna su