MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Primatenwiki
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
Das ist ein hervorragendes Projekt! MediaWiki bietet von Haus aus zwar die sortable-Funktion, aber echtes Filtern wie in Excel erfordert in der Tat ein wenig JavaScript-Magie.
Da MediaWiki die jQuery-Bibliothek standardmäßig lädt, nutzen wir diese, um eine schlanke und performante Lösung zu bauen.
Die Lösung: Ein dynamischer Header-Filter
Dieser Code fügt automatisch ein Eingabefeld in jede Spalte einer Tabelle ein, die die Klasse filterable besitzt.
1. Das JavaScript
Kopiere diesen Code in deine Seite MediaWiki:Common.js:
JavaScript
$(function() {
$(function() {
    // Suche nach Tabellen mit der Klasse "filterable"
     $('table.filterable').each(function() {
     $('table.filterable').each(function() {
         var $table = $(this);
         var $table = $(this);
         var $headerRow = $table.find('tr').first();
         var $headerRow = $table.find('tr').first();
         var $filterRow = $('<tr class="filter-row"></tr>');
         var $filterRow = $('<tr class="filter-row"></tr>');
        var $rows = $table.find('tbody > tr').not(':first');


        // Erstelle für jede Header-Zelle ein Eingabefeld
         $headerRow.find('th').each(function(index) {
         $headerRow.find('th').each(function() {
             var $filterCell = $('<th></th>');
             var $filterCell = $('<th></th>');
             var $input = $('<input type="text" placeholder="Filtern..." style="width: 100%; box-sizing: border-box;" />');
             var $select = $('<select style="width: 100%;"><option value="">Alle</option></select>');
           
            // Eindeutige Werte aus der Spalte sammeln
            var values = [];
            $rows.each(function() {
                var val = $(this).find('td').eq(index).text().trim();
                if (val && $.inArray(val, values) === -1) {
                    values.push(val);
                }
            });
 
            // Werte sortieren und als Optionen hinzufügen
            values.sort().forEach(function(val) {
                $select.append($('<option></option>').val(val).html(val));
            });


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


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


        // Füge die Filter-Zeile unter dem Header ein
         $headerRow.after($filterRow);
         $headerRow.after($filterRow);
     });
     });


     function filterTable($table) {
     function filterTable($table) {
         var $rows = $table.find('tr').not(':first').not('.filter-row');
         var $rows = $table.find('tbody > tr').not(':first').not('.filter-row');
         var $inputs = $table.find('.filter-row input');
         var $selects = $table.find('.filter-row select');


         $rows.each(function() {
         $rows.each(function() {
Zeile 42: Zeile 43:
             var showRow = true;
             var showRow = true;


             $inputs.each(function(index) {
             $selects.each(function(index) {
                 var filterValue = $(this).val().toLowerCase();
                 var filterValue = $(this).val();
                 var cellValue = $row.find('td').eq(index).text().toLowerCase();
                 var cellValue = $row.find('td').eq(index).text().trim();


                 if (filterValue && cellValue.indexOf(filterValue) === -1) {
                 if (filterValue !== "" && cellValue !== filterValue) {
                     showRow = false;
                     showRow = false;
                     return false; // Break loop
                     return false;
                 }
                 }
             });
             });

Version vom 24. Februar 2026, 08:04 Uhr

$(function() {
    $('table.filterable').each(function() {
        var $table = $(this);
        var $headerRow = $table.find('tr').first();
        var $filterRow = $('<tr class="filter-row"></tr>');
        var $rows = $table.find('tbody > tr').not(':first');

        $headerRow.find('th').each(function(index) {
            var $filterCell = $('<th></th>');
            var $select = $('<select style="width: 100%;"><option value="">Alle</option></select>');
            
            // Eindeutige Werte aus der Spalte sammeln
            var values = [];
            $rows.each(function() {
                var val = $(this).find('td').eq(index).text().trim();
                if (val && $.inArray(val, values) === -1) {
                    values.push(val);
                }
            });

            // Werte sortieren und als Optionen hinzufügen
            values.sort().forEach(function(val) {
                $select.append($('<option></option>').val(val).html(val));
            });

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

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

        $headerRow.after($filterRow);
    });

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

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

            $selects.each(function(index) {
                var filterValue = $(this).val();
                var cellValue = $row.find('td').eq(index).text().trim();

                if (filterValue !== "" && cellValue !== filterValue) {
                    showRow = false;
                    return false;
                }
            });

            $row.toggle(showRow);
        });
    }
});