Case de tri dans les tables de données à l'aide de jQuery

J'ai essayé de trier un champ de case à cocher dans DataTables plugin jQuery pour cocher et décocher.

Je suis de la création de l'entrée (case à cocher) à l'intérieur de la table comme ceci:

'<input type="checkbox" '+ check +' />'

case contenant le texte "vérifié" ou "".

Jusqu'à présent j'ai essayé juste pour ajouter DOM case type de tri, comme ceci:

{ "sSortDataType": "dom-checkbox" }

Lorsque j'utilise le code du plugin La documentation de l'API, j'obtiens l'erreur suivante:

Uncaught TypeError: Cannot read property 'afnSortData' undefined
à l'intérieur de ma console.

Problème: appuyez sur l'en-tête de colonne de ne pas trier la colonne par coché ou non coché des cases à cocher.

Je voudrais obtenir des suggestions sur comment corriger l'erreur mentionnée ci-dessus ou une autre façon de trier en utilisant uniquement jQuery et du plugin méthodes.

Grâce.

MODIFIER

Juste essayé avec un code fixe - aucun message d'erreur. Mais le tri est raté: c'est juste en remplaçant les uns avec les autres, mais pas de tri. Par exemple: si j'ai 1 case cochée et 9 pas, la case cochée est le passage de la troisième place à la sixième et à nouveau pour la troisième et ainsi de suite.

voir ici: stackoverflow.com/questions/13206894/...
aucune référence à la case de tri.
il vous montre comment trier sur n'importe quel type d'entrée... vous avez juste besoin de faire référence au droit des propriétés, comme l' (entrée).propriété checked.
comme "sSortDataType": "dom-(entrée).vérifié" ? cause il n'est pas de travail pour moi
revenir au lien que j'ai fourni... (entrée) dans mon commentaire était juste un repère... dans le lien que j'ai fourni, ils permorm un tri sur les différents types d'entrée... jusr utiliser cet exemple, avec les propriétés de la case à cocher...

OriginalL'auteur Vera Gavriel | 2013-04-04

7

ce que j'ai fait est creatinga bool var cachées dans les P de sorte qu'il sera dans le sameplace que la case à cocher.que j'ai désactivé l'option de changer la valeur dans la case et le tri est maintenant opérationnel.

j'ai une situation similaire, mon problème est que lorsque je sort de la case, le contrôle n'est pas d'aller à la fonction définie pour elle ,j'ai une fonction nommée dom-case définie, et la sSortDataType est dom-checbox, u peut aider ?
Plz peut vous fournir l'extrait de code, comme je suis également confrontés à la même question
type='checkbox' class='minimal' "+product_enabled+"><p style='visibility: hidden; display: none;" >"+produits[i].permis+"</p></td>

OriginalL'auteur Vera Gavriel

Trouvé ça par exemple:

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
{
    var aData = [];
    $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
        aData.push( this.checked==true ? "1" : "0" );
    } );
    return aData;
}

Initialisé comme suit:

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "sSortDataType": "dom-checkbox" }
        ]
    } );
} );

Ici: http://www.datatables.net/examples/plug-ins/dom_sort.html

j'ai écrit que cet exemple renvoie une erreur et j'ai écrit ce genre d'erreur, il est dans la m question.
Désolé, j'ai tout lu, mais n'a pas suivi le lien.
Avez-vous une balise thead et th tags pour vos en-têtes par hasard??? J'ai eu des problèmes une fois avec les tables de données et un peu marquée de la table.
th balises à l'intérieur de balises thead @Moby de Stunt Double
ne fonctionne pas pour moi, mais pas d'erreur

OriginalL'auteur Moby's Stunt Double

3

J'ai dû modifier légèrement la réponse fournie par Moby's Stunt Double. Pas de les trier de nouveau plug-in requis! Juste un peu de codage personnalisé.

Merci pour toutes les idées, tout le monde! Pour une raison que j'ai eu à faire une manipulation spéciale pour ma table qui n'était pas une solution générale. Ce qui m'allait très bien.

Ma case à cocher est désactivée et vérifié par programmation, donc je ne pouvais pas appeler .checked. L'appel en fonction de iColumn aussi jeté des choses; sans doute parce que j'avais caché 0e colonne.

C'est ce qui a fonctionné pour moi:
```
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn ) {
    var aData = [];
    $(oSettings.oApi._fnGetTrNodes(oSettings)).each( function () {
        var checker = $(this).find('.classOnSurroundingSpan input');
        aData.push( checker.prop("checked")==true ? "1" : "0" );
    } );
    return aData;
}
```
Mon mark-up ressemble à ceci (les environs span faisait partie d'une solution pour activer le suivi un clic sur une case à cocher désactivée):
```
<span class='classOnSurroundingSpan'><input type='checkbox' disabled='disabled'/></span>
```
Ma définition de la table a été (en partie):
```
"aoColumnDefs": [
    {"sSortDataType": "dom-checkbox",
    "aTargets":[1],
    "asSorting": ["desc"]}
]
```
OriginalL'auteur veeTrain

cela fonctionne pour moi:

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "orderDataType": "dom-text", type: 'string' },
        ]
    } );
} );

OriginalL'auteur DIG

Trouvé ça par exemple:

  $.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
    return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
        return $('input', td)[1].checked ? '1' : '0';
    });
}

Initialisé comme suit:

$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
                        {
            "targets": 10,
                            "orderDataType": "dom-checkbox"
                        });
} );

OriginalL'auteur Ramachandran

2

Cette solution a fonctionné pour moi alors j'ai écrit un billet de blog sur elle.

http://blog.josephmisiti.com/sorting-booleans-in-jquery-datatables

le lien est cassé.
s'il vous plaît corriger le lien

OriginalL'auteur josephmisiti

Cela fonctionne pour moi

$(document).ready(function () {
    $('#Table').DataTable({
        "language": datatableLanguaje,
        "aoColumnDefs": [ 
            { "aTargets": [8], "orderDataType": "dom-text", type:'string' },
        ]
    });
});

OriginalL'auteur Eddy Wister

Si vous avez une sorte d'identifiant unique sur la case de l'élément, vous pouvez faire quelque chose d'assez propre comme cet exemple ci-dessous (remarque c'est un datatables tri plugin syntaxe)

Si vos entrées ressembler à:

<input data-app-id="1" class="migrateCheck" type="checkbox">

Le plugin ressemblerait à:

function checkboxCompare(a, b) {
    var aId = $(a).data('app-id'),
        bId = $(b).data('app-id'),
        aChecked = $('.migrateCheck[data-app-id=' + aId + ']:checked').length,
        bChecked = $('.migrateCheck[data-app-id=' + bId + ']:checked').length;

    if (aChecked && !bChecked) return -1;
    else if (!aChecked && bChecked) return 1;

    return 0;
}

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "checkbox-pre": function (a) {
        return a;
    },

    "checkbox-asc": function (a, b) {
        return checkboxCompare(a, b);
    },

    "checkbox-desc": function (a, b) {
        return checkboxCompare(b, a);
    }
});

Ensuite, il suffit de préciser sType: "checkbox" sur le aoColumnDefs attr pour le col qui contient la case à cocher.

OriginalL'auteur rynop

Tout peut être triée par une simple html.

$('#table input[type=checkbox]').each(function () {
    var text = $(this).prop('checked');
    var ele = $('<span>' + text + '</span>').hide();
    $(this).after(ele);
});

OriginalL'auteur Tim

Cette perplexe moi pour un peu.

J'ai utilisé la norme Plugin Code https://datatables.net/plug-ins/sorting/custom-data-source/dom-checkbox:

$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).prop('checked') ? '1' : '0';
    } );
};

Vous devez spécifier "dom-case à cocher" types de colonnes sont triables:

$('#myTable').dataTable({
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ "action" ] },
        { "sSortDataType": "dom-checkbox", "aTargets": [ "enabled" ] }
    ],
    "aaSorting": [
        [ 3, "desc" ]
    ]
});

Dans la vue j'ai activer la Case à cocher les colonnes de mettre la case (pas lié à celui du col):

<th class="enabled">Enabled</th>

OriginalL'auteur Jeremy Thompson

Vous devez vous connecter pour publier un commentaire.