Tablesorter: filter_functions und sortieren nach Wert

Question

Ich verwende neueste Version (2.28.8) von tablesorter mit Filter-Widget und möchte:

1. sortieren nach Prozent Liste von ASC/DESC Reihenfolge
2. definieren ein benutzerdefinierter Filter einig vordefinierten Bereichs
3. um meine benutzerdefinierten Filter werden aufsteigend eine (< 5% dann 10% bis 20%, ...)

ich definining ein wie diese aufzulisten: <td data-text="5-10%">10</td> Bereichsfilter haben. Hier

ist ein demo:

• Min Spalte hat Zahlen in Daten-Text definiert den Auftrag
• Max Spalte zu definieren, nicht hat.

=> Können wir das richtig machen? (Ziel # 3 der obigen Liste)

Beobachtet: Der Filter funktioniert gut. Aber der Klick ASC/DESC ist falsch. Beachten Sie, dass die absteigende Reihenfolge für Max-Spalte korrekt ist, aber nicht die aufsteigende Reihenfolge.

Erwartet: Wie kann ich meine 3 Ziele erreichen?

Ich sah this example, aber wie ich viel Tabelle mit diesem Plugin habe, sollte ich einen Weg, die filter_functions für eine einzelne Tabelle, die bereits die Tablesorter initialisiert anwenden.

Tablesorter heißt:

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

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

Hoffe, dass ich klar genug war, nicht zögern zu fragen. Danke für Ihre Zeit.

Answer 1

Überprüfen Sie die filter_functions demo. Sie können eine Reihe von Filterfunktionen definieren, die auf die Auswahl angewendet werden. Darüber hinaus können Sie eine Klasse in den Header hinzufügen für jede Spalte statt definieren eine Funktion zum Ziel:

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; } 
     } 
     } 
    } 
    }); 
});