Jquery tablesorter - ordina per colonna avendo <input> elementi

Question

Ho una tabella come questa:

| Update | Name | Code  | modification date | 
|   | name1 | code1  | 2009-12-09  | 
|   | name2 | otehercode | 2007-09-30  | 

dove la colonna aggiornamento contiene caselle <input type='checkbox' />.

Lo stato iniziale della casella di controllo è determinato prima del rendering della tabella, ma dopo che le righe sono state recuperate dal database (è basata su un insieme di condizioni, sul lato server).

La casella di controllo può essere selezionata per impostazione predefinita, deselezionata per impostazione predefinita o disabilitata (disabled='disabled' come attributo input).

Sto usando JQuery's Tablesorter per ordinare i miei tavoli. E mi piacerebbe essere in grado di ordinare per la colonna contenente le caselle di controllo. Com'è possibile (potrei passare alcuni attributi aggiuntivi al mio elemento input forse, se fosse d'aiuto ...)?
Devo scrivere il mio parser per gestirlo?

Answer 1

Aggiungere uno span nascosto subito prima dell'input e includere in esso del testo (che verrà utilizzato per ordinare la colonna). Qualcosa di simile:

<td> 
    <span class="hidden">1</span> 
    <input type="checkbox" name="x" value="y"> 
</td> 

Se necessario, è possibile collegare un evento per la casella di controllo in modo che esso modifica il contenuto del fratello precedente (la durata), quando controllato/incontrollato:

$(document).ready(function() { 

    $('#tableid input').click(function() { 
     var order = this.checked ? '1' : '0'; 
     $(this).prev().html(order); 
    }) 

}) 

Nota: I non ho controllato il codice, quindi potrebbe avere errori.

Answer 2

È possibile aggiungere un parser personalizzato per tablesorter, smth come questo:

$.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
     // return false so this parser is not auto detected 
     return false; 
    }, 
    format: function(s) { 
     // Here we write custom function for processing our custum column type 
     return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

e poi usarlo nella tabella

$("table").tablesorter(headers:{0:{sorter:input}}); 

Answer 3

Questa è la corretta versione più completa/della risposta di Haart.

$(document).ready(function() { 
    $.tablesorter.addParser({ 
     id: "input", 
     is: function(s) { 
      return false; 
     }, 
     format: function(s, t, node) { 
      return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0; 
     }, 
     type: "numeric" 
    }); 

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}}); 
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");}); 

}); 

Answer 4

Sto aggiungendo questa risposta perché sto usando una libreria jQuery TableSorter supportata/biforcuta con nuove funzionalità. È inclusa una libreria di parser opzionale per i campi di input/select.

http://mottie.github.io/tablesorter/docs/

Ecco un esempio: http://mottie.github.io/tablesorter/docs/example-widget-grouping.html ed è fatta includendo l'ingresso/select biblioteca parser "parser-input-select.js", l'aggiunta di un oggetto intestazioni e dichiarando il tipo di colonne e di analisi.

parser

headers: { 
    0: { sorter: 'checkbox' }, 
    3: { sorter: 'select' }, 
    6: { sorter: 'inputs' } 
} 

aggiuntivi inclusi sono: data parsing (w/Zucchero & DateJS), date ISO8601, mesi, anni 2 cifre, nei giorni feriali, la distanza (piedi/pollici & metriche) e il formato del titolo (rimuove "A" & "Il").

Answer 5

È possibile utilizzare il tablesorter plugin jQuery e aggiungere un parser personalizzato che è in grado di risolvere tutte le colonne di caselle di controllo:

$.tablesorter.addParser({ 
     id: 'checkbox', 
     is: function (s, table, cell) { 
      return $(cell).find('input[type=checkbox]').length > 0; 
     }, 
     format: function (s, table, cell) { 
      return $(cell).find('input:checked').length > 0 ? 0 : 1; 
     }, 
     type: "numeric" 
    }); 

Answer 6

Basta un tocco finale per rendere la risposta di Aaron completa ed evitare gli errori di overflow dello stack. Quindi, oltre a utilizzare la funzionalità $.tablesorter.parser() come descritto sopra, ho dovuto aggiungere quanto segue nella mia pagina per farlo funzionare con i valori aggiornati delle caselle di controllo in fase di esecuzione.

var checkboxCahnged = false; 

    $('input[type="checkbox"]').change(function(){ 
     checkboxChanged = true; 
    }); 

    // sorterOptions is a variables that uses the parser and disables 
    // sorting when needed 
    $('#myTable').tablesorter(sorterOptions); 
    // assign the sortStart event 
    $('#myTable')..bind("sortStart",function() { 
     if (checkboxChanged) { 
      checkboxChanged = false; 
      // force an update event for the table 
      // so the sorter works with the updated check box values 
      $('#myTable')..trigger('update'); 
     } 
    }); 

Answer 7

<td align="center"> 
 
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p> 
 
    <input type="checkbox" value="YOUR DATA BASE VALUE"/> 
 
    </td>

//javascript 
 
$(document).ready(function() { 
 
$(".checkBoxSorting").hide(); 
 
});