Jquery tablesorter - ordina per colonna avente ingresso <> elementi

Question

Ho una tabella come questa:

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

Se la colonna di aggiornamento contiene le caselle di controllo <input type='checkbox' />.

Lo stato iniziale casella di controllo è determinata prima del rendering al tavolo, ma dopo le righe vengono recuperate dal database (si basa sulla serie di condizioni, sul lato server).

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

tablesorter di JQuery per ordinare le mie tabelle. E mi piacerebbe essere in grado di ordinare in base alla colonna contenente le caselle di controllo. Come è possibile (ho potuto passare alcuni attributi aggiuntivi al mio elemento input forse, se sarebbe d'aiuto ...)?
Devo scrivere il mio parser per gestire questo?

Answer 1

Aggiungere un arco nascosto poco prima dell'ingresso, e comprendono in essa un testo (che sarà 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: non ho controllato il codice, quindi potrebbe avere errori

Answer 2

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 3

Sto aggiungendo questa risposta perché sto utilizzando un biforcuta libreria supportato / jQuery tablesorter con nuove funzionalità. Una libreria parser opzionale per ingresso / selezionare i campi è incluso.

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.

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

parser aggiuntivi inclusi sono: Data di parsing (w / Zucchero & DateJS), date ISO8601, mesi, anni 2 cifre, nei giorni feriali, la distanza (piedi / pollici e metrica) e il formato del titolo (rimuove "A" e "L '") .

Answer 4

È 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 5

È possibile aggiungere un parser personalizzato per tablesorter, dovrebbe occupare in questo modo:

 $.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 utilizzarlo nella tabella

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

Answer 6

Un solo tocco finale per rendere la risposta di Aaron completo ed evitare gli errori di overflow dello stack. Così, oltre a utilizzare la funzionalità $.tablesorter.parser() come descritto sopra, ho dovuto aggiungere il seguente nella mia pagina per farlo funzionare con i valori aggiornati casella 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();
});

Answer 8

Ho provato più degli approcci delle altre risposte, ma finito per usare la risposta accettata dalla salgiza, con il commento di Martin sull'aggiornamento del modello di tabella. Tuttavia, quando ho implementato esso, ho impostato la linea aggiornamento all'interno della casella di controllo onchange grilletto, come la formulazione suggerita. Questo riarrangiato i miei file su controllo / deselezionare casella di controllo, che ho trovato molto confuso. Le linee appena saliti via al clic. Così, invece ho legato la funzionalità di aggiornamento per l'intestazione di colonna casella di controllo reale, in modo che le linee sarebbero state riorganizzate solo quando si fa clic per aggiornare l'ordinamento. Funziona proprio come io voglio che:

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});