MediaWiki:Common.js

$(function() {
    mw.loader.using(['jquery.tablesorter'], function() {
        
        $('table.filterable').each(function() {
            var $table = $(this);
            
            // Falls kein thead existiert, erstellen wir einen und schieben die erste Zeile rein
            var $thead = $table.find('thead');
            if ($thead.length === 0) {
                $thead = $('<thead></thead>').prependTo($table);
                $table.find('tr:first').appendTo($thead);
            }

            // Wir finden die echte Header-Zeile (die mit den Sortier-Links)
            var $headerRow = $thead.find('tr').first();
            
            // Wir erstellen die Filter-Zeile
            // WICHTIG: Wir geben ihr die Klasse "sorttop", das ist ein MediaWiki-Standard,
            // um Zeilen im Header festzuhalten.
            var $filterRow = $('<tr class="filter-row sorttop"></tr>');

            $headerRow.find('th').each(function(index) {
                var $filterCell = $('<th class="unsortable" style="background:#f2f2f2; padding:4px;"></th>');
                var $select = $('<select style="width:100%; font-weight:normal; font-size:0.85em;"><option value="">(Alle)</option></select>');
                
                // Verhindert das "Durchreichen" des Klicks an den Sortierer
                $select.on('click mousedown', function(e) {
                    e.stopPropagation();
                });

                // Werte sammeln aus dem tbody
                var values = [];
                $table.find('tbody tr td:nth-child(' + (index + 1) + ')').each(function() {
                    var txt = $(this).text().trim();
                    if (txt !== "" && $.inArray(txt, values) === -1) {
                        values.push(txt);
                    }
                });

                values.sort().forEach(function(v) {
                    $select.append($('<option></option>').val(v).text(v));
                });

                $select.on('change', function() {
                    runFilter($table);
                });

                $filterCell.append($select);
                $filterRow.append($filterCell);
            });

            // Die Filter-Zeile in den thead hängen
            $thead.append($filterRow);
            
            // Dem Tablesorter sagen: "Hey, hier hat sich was geändert!"
            $table.trigger('update');
        });
    });

    function runFilter($table) {
        var $rows = $table.find('tbody tr').not('.filter-row');
        var $selects = $table.find('.filter-row select');

        $rows.each(function() {
            var $row = $(this);
            var isVisible = true;

            $selects.each(function(i) {
                var val = $(this).val();
                var cellText = $row.find('td').eq(i).text().trim();
                if (val !== "" && cellText !== val) {
                    isVisible = false;
                    return false;
                }
            });
            $row.toggle(isVisible);
        });
    }
});