JQuery Tablesorter - sortiert nach Spalte mit -Elemente

Question

Ich habe eine Tabelle wie folgt aus:

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

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

Das Kontrollkästchen Anfangszustand bestimmt wird, bevor die Tabelle Rendering, aber nachdem die Zeilen aus der Datenbank abgerufen werden (es basiert auf Reihe von Bedingungen, auf der Server-Seite).

Das Kontrollkästchen kann standardmäßig standardmäßig deaktiviert oder deaktiviert (disabled='disabled' als input Attribut) überprüft werden.

Ich bin mit jQuerys Tablesorter meine Tabellen zu sortieren. Und ich mag durch die Spalte der Kontrollkästchen enthält, sortieren können. Wie ist es möglich (ich konnte einige zusätzliche Attribute zu meinem input Element passieren vielleicht, wenn es helfen würde, ...)?
Soll ich meine eigenen Parser schreiben, dass zu behandeln?

Answer 1

Fügen Sie eine versteckte Spanne kurz vor dem Eingang, und ist in ihm einen Text (das verwendet wird, um die Spalte zu sortieren). So 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: Ich habe den Code nicht überprüft, so dass es Fehler haben könnte

Answer 2

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

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

Ich füge diese Antwort, weil ich eine unterstützte / gegabelt jQuery Tablesorter Bibliothek mit neuen Funktionen bin mit. Eine optionale Parser-Bibliothek für die Eingabe / Auswahlfelder enthalten ist.

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

Hier ist ein Beispiel: http://mottie.github.io/tablesorter/docs/example-widget -grouping.html und es ist getan, indem die Eingabe / select-Parser-Bibliothek „Parser-input-select.js“ und fügt hinzu, ein Header-Objekt und zu erklären, die Spalten und Parsing-Typen.

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

Weitere Parser enthalten sind: Datum Parsing (w / Sugar & DateJS), ISO8601 Termine, Monate, 2-stellige Jahre, Wochentag, Abstand (Fuß / Zoll und metrisch) und Titel-Format (entfernt "A" & "The") .

Answer 4

Sie können das tablesorter jQuery-Plugin, und fügen Sie einen benutzerdefinierten Parser die in der Lage ist, alle Kontrollkästchen Spalten 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 5

Sie können einen benutzerdefinierten Parser Tablesorter hinzufügen, 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 verwenden Sie es dann in der Tabelle

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

Answer 6

Nur ein letzter Schliff machen Aaron Antwort vollständig und vermeiden, dass die Stack-Überlauf-Fehler. So, zusätzlich zu dem mit der $.tablesorter.parser() Funktionalität, wie oben beschrieben, hatte ich folgende in meiner Seite hinzufügen, um es zur Laufzeit mit aktualisierten Kontrollkästchen Werten zu arbeiten.

    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

Ich habe versucht, mehrere der Ansätze in den anderen Antworten, aber am Ende mit der akzeptierte Antwort von salgiza, mit dem Kommentar von Martin über den Tisch Modell zu aktualisieren. Allerdings, wenn ich es zuerst implementiert, stelle ich die Update-Zeile innerhalb der Checkbox Onchange Auslöser, wie die Formulierung vorgeschlagen. Diese neu geordnet meine Zeilen auf Überprüfung / Entfernen des Häkchens Checkbox, die ich sehr verwirrend fand. Die Linien hüpfte nur auf Klick entfernt. Anstatt also gebunden ich die Update-Funktion des tatsächlichen Kontrollkästchen Spaltenkopf, so dass die Linien würden nur neu geordnet werden, wenn Sie auf die Sortierung zu aktualisieren. Es funktioniert genauso, wie ich will es an:

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