web-dev-qa-db-fra.com

jQuery DataTable - Masquer les lignes de la manière voulue

Nous travaillons actuellement sur un CRM basé sur le Web. Le projet se passe bien, sauf pour un problème frustrant.

nous utilisons les plug-in DataQuable jQuery pour presque toutes les tables triables de l'application. Voici une liste des incidents actifs.

Open incidents

Comme vous pouvez le constater, la troisième colonne représente le type des incidents (ticket, demande de changement, demande de service, etc.)

Les utilisateurs ont demandé une boîte de filtre placée au-dessus du tableau précédent pour filtrer les types d'incidents. Par exemple, si vous choisissez "Ticket uniquement", tous les autres types seront masqués. Jusqu'à présent, tout fonctionne.

Pour ce faire, chaque ligne a une classe CSS qui représente le type d'incident.

  • Ligne # 1: class = "ticket"
  • Ligne # 2: class = "changeRequest"

Lorsque la valeur de la zone de filtre change, le code javascript suivant est exécuté

$('table.sortable').each(function() {
    for (var i = 0; i < rows.length; i++) {
        if ($(rows[i]).hasClass(vClass)) $(rows[i]).hide();
    }
});

où

  • vClass = La classe CSS représentant le type d'incident
  • lignes = Toutes les lignes de la table de données, obtenues à partir de "$ (SomeDatatable) .dataTable (). fnGetNodes ();"
  • $ ('table.sortable') = Tous les tableaux de données

Maintenant, attachez vos ceintures de sécurité (chausson français). Lorsque vous masquez implicitement une ligne, dataTable la compte toujours. Voici le fabuleux résultat.

Datatable on drugs

Cela étant expliqué, la question principale se pose: comment suis-je censé dire à dataTable que je veux masquer des lignes sans les supprimer pour toujours? DataTable a déjà une boîte de filtre mais j'en ai besoin pour fonctionner indépendamment avec la boîte de filtre de type (pas dans l'image).

Existe-t-il un moyen d'ajouter un deuxième filtre, peut-être?

javascriptjquerydatatables
31
Érik Desjardins

Vous devez écrire un filtre personnalisé pour cette table. Exemple:

$.fn.dataTableExt.afnFiltering.Push(function (oSettings, aData, iDataIndex) {
    if ($(oSettings.nTable).hasClass('do-exclude-filtering')) {
        return aData[16] == '' || $('#chkShowExcluded').is(':checked');
    } else return true;
});

Dans cet exemple, nous ajoutons et supprimons dynamiquement la classe 'do-exclude-filtering' à une table, et si elle a la classe, elle vérifie chaque ligne pour voir si une cellule donnée a une valeur. La logique peut être tout ce que vous pouvez imaginer, restez rapide (cela est exécuté pour chaque ligne, à chaque tirage, pour chaque table de la page (notez qu'il est ajouté à un tableau `` global '' dans DT, pas à une instance individuelle)

Renvoie true pour inclure la ligne, renvoie false pour masquer la ligne

Voici la référence datatable pour utiliser les capacités afnFiltering: http://datatables.net/development/filtering

L'avantage de cela au lieu d'utiliser .fnFilter() est que cela fonctionne AVEC, donc l'utilisateur peut toujours utiliser la zone de filtrage en haut à droite (par défaut, je vois que la vôtre est en bas à droite) pour filtrer davantage les résultats. vous choisissez de les montrer. En d'autres termes, disons que vous masquez tous les éléments "terminés", afin que l'utilisateur ne voie que les éléments "incomplets" dans le tableau. Ensuite, ils peuvent toujours filtrer le tableau pour "ordinateur portable" et ne voir que les lignes qui sont à la fois incomplètes et ont "ordinateur portable" dans leur description

22
BLSully

DataTables offre ceci hors de la boîte: exemple de filtrage de colonne individuelle DataTables ou, mieux encore exemple de filtrage de colonne individuelle DataTables (en utilisant des menus sélectionnés)

2
Majid Fouladpour

Je ne peux pas vous aider avec la partie datatable car je ne l'ai jamais utilisée, mais vous pouvez améliorer le javascript que vous exécutez lorsque la zone de filtre se transforme en:

$('.table-sortable').find('tr.' + vClass).removeClass('hidden').addClass('show');
$('.table-sortable').find('tr:not(.' + vClass + ')').removeClass('hidden').addClass('show');

avec un style CSS approprié. Ou vous pourriez faire:

$('.table-sortable').find('tr.' + vClass).show();
$('.table-sortable').find('tr:not(.' + vClass + ')').hide();

Si vous essayez plutôt l'une de ces approches, vous pourriez avoir de la chance et contourner le problème de datatable, mais dans les deux cas, je pense que votre code sera plus efficace.

2
lukenofurther