Comment puis-je trier les colonnes ayant des éléments d'entrée?

C'est la version la plus complète / correcte de la réponse de Haart. xxx

J'ajoute cette réponse parce que j'utilise une bibliothèque de tables JQuery pris en charge / forcée avec de nouvelles fonctionnalités. Une bibliothèque d'analyseurs optionnelle pour les champs d'entrée / sélection est incluse.

http://mottie.github.ioio / TableSorter / Docs / P>

Voici un exemple: http://mottie.github.io/tampères/docs/example-widget -Grouping.html et il est fait en incluant la bibliothèque d'entrée / Sélectionnez une bibliothèque d'analyseurs "Parser-Select-Select.js", ajoutant un objet en-têtes et déclarant les colonnes et le type d'analyse. P>

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

Vous pouvez utiliser le plug-in TableRter JQuery et ajouter un analyseur personnalisé capable de trier toutes les colonnes à cocher:

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

Une seule touche finale pour rendre la réponse d'Aaron complète et évitez les erreurs de débordement de la pile. Donc, en plus d'utiliser le $. Tableter.Parser () CODE> Fonctionnalité Comme décrit ci-dessus, je devais ajouter ce qui suit sur ma page pour qu'il fonctionne avec les valeurs de case à cocher mises à jour au moment de l'exécution.

    var checkboxChanged = 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');
        }
    });

J'ai essayé de multiples approches dans les autres réponses, mais j'ai fini par utiliser la réponse acceptée de Salgiza, avec le commentaire de Martin sur la mise à jour du modèle de table. Toutefois, lorsque je l'ai mis en œuvre pour la première fois, j'ai défini la ligne de mise à jour dans la case à cocher ONCHANGE déclencheur, comme le libellé suggéré. Cela a réarrangé mes lignes sur la coche de la vérification / décalage, que j'ai trouvée très déroutante. Les lignes ont juste sauté le clic. Donc, au lieu de cela, j'ai lié la fonctionnalité de mise à jour à l'en-tête de la colonne de case à cocher, de sorte que les lignes ne soient réorganisées que lorsque vous cliquez sur pour mettre à jour le tri. Cela fonctionne comme je le souhaite:

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