Jquery tablesorter - trier par colonne ayant <input> é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' />. L'état initial de la case à cocher est déterminé avant le rendu de la table, mais une fois que les lignes ont été extraites de la base de données (en fonction de l'ensemble des conditions, côté serveur).

La case peut être cochée par défaut, non cochée par défaut ou désactivée (disabled='disabled' comme attribut input). J'utilise JQuery's Tablesorter pour trier mes tables. Et j'aimerais pouvoir trier par la colonne contenant les cases à cocher. Comment est-ce possible (je pourrais passer quelques attributs supplémentaires à mon élément input peut-être, si cela pouvait aider ...)?
Dois-je écrire mon propre analyseur pour gérer cela?

Answer 1

Ajoutez une plage masquée juste avant l'entrée et incluez-y du 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: I n'a pas vérifié le code, donc il pourrait avoir des erreurs.

Answer 2

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 3

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 4

J'ajoute cette réponse car j'utilise une bibliothèque jQuery TableSorter prise en charge/fourchue avec de nouvelles fonctionnalités. Une bibliothèque d'analyseurs en option pour les champs de saisie/sélection est incluse.

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éclarer le type de colonnes et l'analyse syntaxique.

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

parseurs inclus sont: la date d'analyse syntaxique (w/sucre & DateJS), les dates ISO8601, mois, 2 ans de chiffres, en semaine, la distance (pieds/pouces & métriques) et le format de titre (supprime "A" & "Le").

Answer 5

Vous pouvez utiliser le tablesorter plugin jQuery 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 6

Juste une touche finale pour faire la réponse d'Aaron complète et éviter les erreurs de débordement de pile. Donc, en plus d'utiliser la fonctionnalité $.tablesorter.parser() comme décrit ci-dessus, j'ai dû ajouter ce qui suit dans ma page pour le faire fonctionner avec des valeurs de case à cocher mises à jour au moment 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(); 
 
});