tablesorter: filter_functions et trier par valeur

Question

J'utilise la dernière version (2.28.8) de tablesorter avec widget filtre et que vous souhaitez:

1. trier par liste de pourcentage par ASC/DESC pour
2. définir un filtre personnalisé à la liste une plage prédéfinie
3. pour mon filtre personnalisé pour être un ascendant (< 5% puis 10% à 20%, ...)

Je suis un definining comme ceci: <td data-text="5-10%">10</td> avoir des filtres de gamme.

Voici un demo:

• min colonne a des numéros définis dans les données de texte pour définir l'ordre
• colonne Max n'a pas.

=> Pouvons-nous le faire plus correctement? (objectif n ° 3 de la liste ci-dessus)

Observé: Le filtre fonctionne correctement. Mais le clic ASC/DESC est faux. Notez que l'ordre décroissant est correct pour la colonne Max mais pas pour l'ordre croissant.

Attendu: Comment puis-je atteindre mes 3 objectifs?

J'ai vu this example mais comme j'ai beaucoup de tables avec ce plugin, je devrais trouver un moyen d'appliquer les fonctions filter_functions pour une seule table ayant déjà le tablesorter initialisé.

tablesorter est appelé:

$(".tablesorter-scroll").tablesorter({ 
    widthFixed : false, 
    showProcessing: true, 

    widgets: ['filter', 'columnSelector', 'scroller'], 
    ... 
}); 

espoir j'été assez clair, ne pas hésiter à demander. Merci pour votre temps.

Answer 1

Consultez le filter_functions demo. Vous pouvez définir un ensemble de fonctions de filtre à appliquer à la sélection. De plus, vous pouvez ajouter une classe à l'en-tête pour cible au lieu de définir une fonction pour chaque colonne:

HTML

<table id="task"> 
    <thead> 
    <tr> 
     <th class='ranges filter-onlyAvail'>Min [%]</th> 
     <th class='ranges filter-onlyAvail'>Max [%]</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>5 %</td> 
     <td>10 %</td> 
    </tr> 
    <tr> 
     <td>50 %</td> 
     <td>100 %</td> 
    </tr> 
    <tr> 
     <td>0 %</td> 
     <td>4 %</td> 
    </tr> 
    <tr> 
     <td>10 %</td> 
     <td>15 %</td> 
    </tr> 
    <tr> 
     <td>25 %</td> 
     <td>50 %</td> 
    </tr> 
    </tbody> 
</table> 

Script

$(function() { 
    $("#task").tablesorter({ 
    widgets: ["zebra", "filter"], 
    widgetOptions: { 
     filter_functions: { 
     '.ranges' : { 
      '<= 5%': function(e, n) { return n <= 5; }, 
      '10% - 20%': function(e, n) { return n >= 10 && n <= 20; }, 
      '20% - 50%': function(e, n) { return n >= 20 && n <= 50; }, 
      '>= 50%': function(e, n) { return n >= 50; } 
     } 
     } 
    } 
    }); 
});