MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Primatenwiki
Zur Navigation springen Zur Suche springen
Änderung 524 von Rbritt (Diskussion) rückgängig gemacht.
Markierung: Rückgängigmachung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
$(function() {
$(function() {
     // Wir warten kurz, bis MediaWiki die Tabelle fertig gerendert hat
     // Wir warten, bis das Tablesorter-Modul von MediaWiki bereit ist
     mw.loader.using(['jquery.tablesorter'], function() {
     mw.loader.using(['jquery.tablesorter'], function() {
          
          
         $('table.filterable').each(function() {
         $('table.filterable').each(function() {
             var $table = $(this);
             var $table = $(this);
             // Wir suchen alle echten Datenzeilen (ignorieren den Header)
           
             var $rows = $table.find('tbody tr').not(function() {
             // 1. Alle echten Datenzeilen identifizieren (die <td> enthalten)
             var $dataRows = $table.find('tr').filter(function() {
                return $(this).find('td').length > 0;
            });
 
            // 2. Die Kopfzeile finden
            var $headerRow = $table.find('tr').filter(function() {
                 return $(this).find('th').length > 0;
                 return $(this).find('th').length > 0;
             });
             }).first();
           
 
             var $headerRow = $table.find('tr').first();
             if ($headerRow.length === 0 || $dataRows.length === 0) return;
             var $filterRow = $('<tr class="filter-row"></tr>');
 
            // 3. Filter-Zeile erstellen (mit 'unsortable' Klasse für MediaWiki)
             var $filterRow = $('<tr class="filter-row unsortable" style="background:#eee;"></tr>');


             $headerRow.find('th').each(function(index) {
             $headerRow.find('th').each(function(index) {
                 var $filterCell = $('<th style="background:#f2f2f2;"></th>');
                 var $filterCell = $('<th class="unsortable"></th>');
                 var $select = $('<select style="width: 100%; min-width: 60px;"><option value="">(Alle)</option></select>');
                 var $select = $('<select style="width:100%; font-weight:normal; font-size:0.9em;"><option value="">(Alle)</option></select>');
                  
                  
                 // Klick-Event stoppen, damit die Tabelle nicht sortiert wird, wenn man das Menü öffnet
                 // Klick-Event isolieren (wichtig für Sortierung!)
                 $select.on('click mousedown', function(e) {
                 $select.on('click mousedown', function(e) {
                     e.stopPropagation();
                     e.stopPropagation();
                 });
                 });


                 // Werte sammeln
                 // Werte aus der entsprechenden Spalte sammeln
                 var values = [];
                 var values = [];
                 $rows.each(function() {
                 $dataRows.each(function() {
                     var text = $(this).find('td').eq(index).text().trim();
                     var text = $(this).find('td').eq(index).text().trim();
                     if (text !== "" && $.inArray(text, values) === -1) {
                     if (text !== "" && $.inArray(text, values) === -1) {
Zeile 31: Zeile 39:
                 });
                 });


                // Sortieren und hinzufügen
                 values.sort().forEach(function(val) {
                 values.sort().forEach(function(val) {
                     $select.append($('<option></option>').val(val).text(val));
                     $select.append($('<option></option>').val(val).text(val));
Zeile 37: Zeile 44:


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


Zeile 44: Zeile 51:
             });
             });


             // Filterzeile nach dem Header einfügen
             // 4. Filterzeile direkt nach dem Header einfügen
             $headerRow.after($filterRow);
             $headerRow.after($filterRow);
           
            // 5. MediaWiki Sortierung neu triggern, damit die Filterzeile ignoriert wird
            $table.tablesorter();
         });
         });
     });
     });


     function filterTable($table) {
     function runFilter($table) {
         var $rows = $table.find('tbody tr').not('.filter-row').not(function() {
         var $rows = $table.find('tr').filter(function() {
            return $(this).find('th').length > 0;
            return $(this).find('td').length > 0 && !$(this).hasClass('filter-row');
         });
         });
         var $selects = $table.find('.filter-row select');
         var $selects = $table.find('.filter-row select');
Zeile 57: Zeile 67:
         $rows.each(function() {
         $rows.each(function() {
             var $row = $(this);
             var $row = $(this);
             var showRow = true;
             var show = true;
 
            $selects.each(function(index) {
                var filterValue = $(this).val();
                var cellValue = $row.find('td').eq(index).text().trim();


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

Version vom 24. Februar 2026, 08:17 Uhr

$(function() {
    // Wir warten, bis das Tablesorter-Modul von MediaWiki bereit ist
    mw.loader.using(['jquery.tablesorter'], function() {
        
        $('table.filterable').each(function() {
            var $table = $(this);
            
            // 1. Alle echten Datenzeilen identifizieren (die <td> enthalten)
            var $dataRows = $table.find('tr').filter(function() {
                return $(this).find('td').length > 0;
            });

            // 2. Die Kopfzeile finden
            var $headerRow = $table.find('tr').filter(function() {
                return $(this).find('th').length > 0;
            }).first();

            if ($headerRow.length === 0 || $dataRows.length === 0) return;

            // 3. Filter-Zeile erstellen (mit 'unsortable' Klasse für MediaWiki)
            var $filterRow = $('<tr class="filter-row unsortable" style="background:#eee;"></tr>');

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

                // Werte aus der entsprechenden Spalte sammeln
                var values = [];
                $dataRows.each(function() {
                    var text = $(this).find('td').eq(index).text().trim();
                    if (text !== "" && $.inArray(text, values) === -1) {
                        values.push(text);
                    }
                });

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

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

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

            // 4. Filterzeile direkt nach dem Header einfügen
            $headerRow.after($filterRow);
            
            // 5. MediaWiki Sortierung neu triggern, damit die Filterzeile ignoriert wird
            $table.tablesorter();
        });
    });

    function runFilter($table) {
        var $rows = $table.find('tr').filter(function() {
            return $(this).find('td').length > 0 && !$(this).hasClass('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);
        });
    }
});