JQuery Tablesorter - sortiert nach Spalte mit <input> Elemente

Question

ich eine Tabelle wie folgt aus:

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

Wenn die Spalte Update enthält Kontrollkästchen <input type='checkbox' />.

Der Anfangszustand des Kontrollkästchens wird vor dem Rendern der Tabelle bestimmt, aber nachdem die Zeilen aus der Datenbank abgerufen wurden (basierend auf den Bedingungen auf der Serverseite).

Das Kontrollkästchen kann standardmäßig aktiviert, nicht standardmäßig deaktiviert oder deaktiviert sein (disabled='disabled' als input Attribut).

Ich verwende JQuery's Tablesorter, um meine Tabellen zu sortieren. Und ich würde gerne nach der Spalte mit den Checkboxen sortieren können. Wie ist es möglich (könnte ich einige zusätzliche Attribute an meine input Element möglicherweise weitergeben, wenn es helfen würde ...)?
Soll ich meinen eigenen Parser schreiben, um damit umzugehen?

Answer 1

Fügen Sie einen versteckten Bereich kurz vor der Eingabe hinzu und fügen Sie darin einen Text ein (der zum Sortieren der Spalte verwendet wird). Etwas wie:

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

Bei Bedarf können Sie ein Ereignis an die Checkbox befestigen, so dass er den Inhalt des vorherigen Geschwister modifiziert (die Spanne), wenn aktiviert/deaktiviert:

$(document).ready(function() { 

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

}) 

Hinweis: I habe den Code nicht überprüft, daher könnte es Fehler geben.

Answer 2

Sie einen benutzerdefinierten Parser Tablesorter hinzufügen können, smth wie folgt aus:

$.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' 
}); 

Und es dann in der Tabelle Antwort

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

Answer 3

Dies ist die vollständigere/korrekte Version von Haart ist verwenden.

$(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

Ich füge diese Antwort hinzu, weil ich eine unterstützte/gegabelte jQuery TableSorter-Bibliothek mit neuen Funktionen verwende. Eine optionale Parser-Bibliothek für Eingabe-/Auswahlfelder ist enthalten.

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

Hier ist ein Beispiel: http://mottie.github.io/tablesorter/docs/example-widget-grouping.html und es wird durch die Einbeziehung der Eingabe/select-Parser-Bibliothek "Parser-input-select.js", das Hinzufügen eines Header-Objekts und erklären die Spalten und Parsing-Typen durchgeführt.

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

Zusätzliche Parser enthalten sind: Datum Parsen (w/Zucker & DateJS), ISO8601 Termine, Monate, 2-stellige Jahre, Wochentag, Abstand (Fuß/Zoll & metrisch) und Titel-Format (entfernt "A" & "Das").

Answer 5

Sie können die tablesorter jQuery-Plugin verwenden und einen benutzerdefinierten Parser hinzufügen, die der Lage ist, alle Kontrollkästchen Spalten zu sortieren:

$.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

Nur eine letzte Note Aaron Antwort vollständig und vermeiden, dass die Stack-Überlauf, Fehler zu machen. Zusätzlich zur Verwendung der oben beschriebenen Funktionalität $.tablesorter.parser() musste ich Folgendes auf meiner Seite hinzufügen, damit es zur Laufzeit mit aktualisierten Kontrollkästchenwerten funktioniert.

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(); 
 
});