MediaWiki:Common.js

$(function() {
    console.log("Filter-Skript: Start...");

    mw.loader.using(['jquery.tablesorter'], function() {
        console.log("Filter-Skript: Tablesorter geladen.");

        $('table.filterable').each(function(tIndex) {
            var $table = $(this);
            console.log("Tabelle " + tIndex + " gefunden.");

            // 1. Datenzeilen finden
            var $dataRows = $table.find('tbody tr').filter(function() {
                return $(this).find('td').length > 0;
            });
            console.log("Tabelle " + tIndex + ": " + $dataRows.length + " Datenzeilen erkannt.");

            // 2. Header finden
            var $headerRow = $table.find('thead tr').first();
            if ($headerRow.length === 0) {
                $headerRow = $table.find('tr').has('th').first();
            }

            if ($headerRow.length === 0) {
                console.error("Tabelle " + tIndex + ": Kein Header (th) gefunden!");
                return;
            }

            // 3. Filter-Zeile erstellen
            var $filterRow = $('<tr class="filter-row unsortable" style="background:#f9f9f9;"></tr>');

            $headerRow.find('th').each(function(i) {
                var $filterCell = $('<th class="unsortable" style="padding:2px;"></th>');
                var $select = $('<select style="width:100%; font-weight:normal; font-size:0.85em;"><option value="">(Alle)</option></select>');
                
                // Klick-Stop für Sortierung
                $select.on('click mousedown', function(e) { e.stopPropagation(); });

                // Werte sammeln
                var values = [];
                $dataRows.each(function() {
                    var txt = $(this).find('td').eq(i).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() {
                    console.log("Filter geändert in Spalte " + i);
                    runFilter($table);
                });

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

            // 4. Einfügen
            $headerRow.after($filterRow);
            console.log("Tabelle " + tIndex + ": Filter-Zeile eingefügt.");
        });
    });

    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 show = true;

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