Tablesorter: Externes Kontrollkästchen zum Filtern

Question

Ich versuche, ein externes Kontrollkästchen zu verwenden, um die Tabelle basierend auf dem Inhalt einer Spalte zu filtern. Die einzigen verwandten Fragen/Lösungen, die ich gefunden habe, betreffen Checkboxen innerhalb der Tabelle, die für Sortierzwecke verwendet werden.

Gewünschte Funktion: Nehmen wir an, Spalte 4 enthält der Einfachheit halber eine 0 oder 1. Wenn dieses Kontrollkästchen aktiviert ist, würde ich gerne die Ergebnisse filtern (Spalte 4 enthält den Wert 1)).

Arbeitsalternative: Wenn Sie eine externe Auswahl (Dropdown) verwenden, kann ich die gewünschte Funktionalität erreichen. Das select-Element (<select id="test_select" name="test_select" class="search" data-column="4">) hat eine Option (<option value="1">1</option>) und dann innerhalb der Konfiguration "widgetOptions" filter_external: '.search'.

Aber eine Auswahl mit einer Option macht keinen Sinn in Bezug auf Usability.

Irgendwelche Vorschläge?

Answer 1

Verwenden Sie die "search" method, um Abfragen für die Tabellendaten durchzuführen.

Here is an example

HTML

<label><input id="findzeroes" type="checkbox"> Find Zeroes</label> 

Script

$(function() { 

    $('#findzeroes').on('change', function(){ 
    var query = []; 
    if (this.checked) { 
     // target 4th column (zero-based index) 
     query[3] = '0'; 
    } 
    $('table').trigger('search', [ query ]); 
    }); 

    $('table').tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra', 'filter'] 
    }); 
}); 

ein <select> anstelle einer Checkbox wird auch funktionieren.