Jquery tablesorter - trier par colonne ayant éléments

Question

J'ai une table comme ceci:

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

Lorsque la colonne de mise à jour contient des cases à cocher <input type='checkbox' />.

La case état initial est déterminé avant de rendre la table, mais après que les lignes sont extraites de la base de données (il est basé sur ensemble de conditions, sur le côté serveur).

La case à cocher peut être cochée par défaut, désactivée par défaut ou désactivé (disabled='disabled' comme attribut input).

J'utilise tablesorter de JQuery pour trier mes tables. Et je voudrais être en mesure de trier par la colonne contenant les cases à cocher. Comment est-il possible (je pourrais passer quelques attributs supplémentaires à mon élément input peut-être, si cela peut aider ...)?
Dois-je écrire mon propre analyseur pour gérer cela?

Answer 1

Ajouter une durée cachée juste avant l'entrée, et d'inclure dans ce texte (qui sera utilisé pour trier la colonne). Quelque chose comme:

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

Si nécessaire, vous pouvez joindre un événement à la case à cocher pour qu'il modifie le contenu du frère précédent (la durée) lorsqu'elle est cochée / décochée:

$(document).ready(function() {

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

})

Note:. Je n'ai pas vérifié le code, il peut y avoir des erreurs

Answer 2

Ceci est la version plus complète / correcte de la réponse de multithérapie.

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

J'ajoute cette réponse parce que je suis en utilisant une bibliothèque jQuery tablesorter pris en charge / fourchue avec de nouvelles fonctionnalités. Une bibliothèque d'analyseur en option pour les entrées / champs de sélection est inclus.

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

Voici un exemple: http://mottie.github.io/tablesorter/docs/example-widget -grouping.html et il est fait en incluant l'entrée / select parser « analyseur-entrée-select.js », l'ajout d'un objet en-têtes et déclarant le type de colonnes et l'analyse syntaxique.

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

parseurs supplémentaires inclus sont: Date de l'analyse (w / Sugar & DateJS), les dates ISO8601, mois, 2 ans de chiffres, en semaine, la distance (pieds / pouces et métrique) et le format de titre (supprime "A" et "The") .

Answer 4

Vous pouvez utiliser le plugin jQuery tablesorter et ajoutez un analyseur personnalisé qui est capable de trier toutes les colonnes de cases à 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"
    });

Answer 5

Vous pouvez ajouter un analyseur personnalisé à tablesorter, SMTH comme ceci:

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

Et puis utilisez dans votre table

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

Answer 6

Juste une touche finale pour faire la réponse d'Aaron complète et éviter les erreurs de débordement de pile. Ainsi, en plus d'utiliser la fonctionnalité de $.tablesorter.parser() comme décrit ci-dessus, je devais ajouter ce qui suit dans ma page pour le faire fonctionner avec des valeurs de cases à cocher mises à jour lors de l'exécution.

    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

J'ai essayé plusieurs des approches dans les autres réponses, mais nous avons fini par utiliser la réponse acceptée de salgiza, avec le commentaire de martin à mettre à jour le modèle de table. Cependant, quand je mis en œuvre, je mis la ligne de mise à jour dans la case à cocher onchange déclencheur, comme le libellé proposé. Cette réarrangé mes lignes sur la case cochant / décochant, que je trouvais très déroutant. Les lignes juste sauté loin en cliquant dessus. Ainsi, au lieu que je lié la fonctionnalité de mise à jour à la tête de la colonne de cases à cocher réelle, de sorte que les lignes seraient réorganisés que lorsque vous cliquez pour mettre à jour le tri. Il fonctionne comme je le veux à:

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