MediaWiki:Common.js - Versionsgeschichte

Rbritt am 24. Februar 2026 um 08:27 Uhr

2026-02-24T08:27:21Z

← Nächstältere Version		Version vom 24. Februar 2026, 08:27 Uhr
Zeile 1:		Zeile 1:
			/* Tabellenfilter */
	$(function() {		$(function() {
	mw.loader.using(['jquery.tablesorter'], function() {		mw.loader.using(['jquery.tablesorter'], function() {

Rbritt am 24. Februar 2026 um 08:25 Uhr

2026-02-24T08:25:42Z

← Nächstältere Version		Version vom 24. Februar 2026, 08:25 Uhr
Zeile 1:		Zeile 1:
	$(function() {		$(function() {
	~~console.log("Filter-Skript: Starte robusten Modus...");~~

	mw.loader.using(['jquery.tablesorter'], function() {		mw.loader.using(['jquery.tablesorter'], function() {

	$('table.filterable').each(function(~~tIndex~~) {		$('table.filterable').each(function() {
	var $table = $(this);		var $table = $(this);

	// ~~Wir suchen~~ die erste Zeile ~~im Body oder die erste Datenzeile~~		// Falls kein thead existiert, erstellen wir einen und schieben die erste Zeile rein
	var $~~firstDataRow~~ = $table.find('~~tbody tr~~'~~).first(~~);		var $thead = $table.find('thead');
	if ($~~firstDataRow~~.length === 0) {		if ($thead.length === 0) {
	$~~firstDataRow~~ = $~~table.find~~('tr').~~has~~('td').~~first~~();		$thead = $('<thead></thead>').prependTo($table);
			$table.find('tr:first').appendTo($thead);
	}		}

	// Filter-Zeile ~~erstellen, aber als normale Datenzeile tarnen~~		// Wir finden die echte Header-Zeile (die mit den Sortier-Links)
	// Wir ~~nutzen td statt th~~, ~~damit der Tablesorter sie nicht als~~ Header ~~ansieht~~		var $headerRow = $thead.find('tr').first();
	var $filterRow = $('<tr class="filter-row~~" style="background:#f2f2f2 !important; border-bottom: 2px solid #ccc;~~"></tr>');
			// 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>');

	~~// Wir zählen die Spalten basierend auf der ersten Datenzeile~~		$headerRow.find('th').each(function(index) {
	~~var columnCount =~~ $~~firstDataRow~~.find('td').~~length;~~		var $filterCell = $('<th class="unsortable" style="background:#f2f2f2; padding:4px;"></th>');

	~~for~~ (~~var i = 0; i < columnCount; i++~~) {
	var $filterCell = $('<td style="padding:4px;"></td>');
	var $select = $('<select style="width:100%; font-weight:normal; font-size:0.85em;"><option value="">(Alle)</option></select>');		var $select = $('<select style="width:100%; font-weight:normal; font-size:0.85em;"><option value="">(Alle)</option></select>');

	// ~~Klick-Stop:~~ Verhindert~~, dass~~ das ~~Klicken im Dropdown die Sortierung triggert~~		// Verhindert das "Durchreichen" des Klicks an den Sortierer
	$select.on('click mousedown', function(e) {		$select.on('click mousedown', function(e) {
	e.stopPropagation();		e.stopPropagation();
	});		});

	// Werte sammeln aus ~~allen Spalten (i-ter Index)~~		// Werte sammeln aus dem tbody
	var values = [];		var values = [];
	$table.find('tr')~~.has('td~~')~~.not('.filter-row~~').each(function() {		$table.find('tbody tr td:nth-child(' + (index + 1) + ')').each(function() {
	var txt = $(this~~).find('td').eq(i~~).text().trim();		var txt = $(this).text().trim();
	if (txt !== "" && $.inArray(txt, values) === -1) {		if (txt !== "" && $.inArray(txt, values) === -1) {
	values.push(txt);		values.push(txt);
Zeile 48:		Zeile 48:
	$filterCell.append($select);		$filterCell.append($select);
	$filterRow.append($filterCell);		$filterRow.append($filterCell);
	}		});

	// ~~Trick: Wir fügen die~~ Filter-Zeile in den ~~tbody ein, VOR die erste Datenzeile~~		// Die Filter-Zeile in den thead hängen
	$~~firstDataRow~~.~~before~~($filterRow);		$thead.append($filterRow);

	~~// MediaWiki mitteilen, dass sich die Tabelle geändert hat,~~
	~~// aber wir markieren die Zeile für den Sorter als "keine Daten"~~
	~~$table.trigger('update'~~);

	~~console.log(~~"~~Tabelle~~ " ~~+ tIndex + ": Filter erfolgreich vor Datenzeilen platziert~~.");		// Dem Tablesorter sagen: "Hey, hier hat sich was geändert!"
			$table.trigger('update');
	});		});
	});		});

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

Rbritt am 24. Februar 2026 um 08:22 Uhr

2026-02-24T08:22:50Z

← Nächstältere Version		Version vom 24. Februar 2026, 08:22 Uhr
Zeile 1:		Zeile 1:
	$(function() {		$(function() {
	console.log("Filter-Skript: ~~Start~~...");		console.log("Filter-Skript: Starte robusten Modus...");

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

	$('table.filterable').each(function(tIndex) {		$('table.filterable').each(function(tIndex) {
	var $table = $(this);		var $table = $(this);
	~~console.log("Tabelle " + tIndex + " gefunden.");~~
			// Wir suchen die erste Zeile im Body oder die erste Datenzeile
	// ~~1. Datenzeilen finden~~		var $firstDataRow = $table.find('tbody tr').first();
	var $~~dataRows~~ = $table.find('tbody ~~tr').filter(function() {~~		if ($firstDataRow.length === 0) {
	~~return $(this).find('td').length > 0;~~		$firstDataRow = $table.find('tr').has('td').first();
	~~});~~
	~~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) {~~		// Filter-Zeile erstellen, aber als normale Datenzeile tarnen
	~~console.error(~~"~~Tabelle~~ " ~~+ tIndex +~~ ": ~~Kein Header (th) gefunden~~!");		// Wir nutzen td statt th, damit der Tablesorter sie nicht als Header ansieht
	~~return;~~		var $filterRow = $('<tr class="filter-row" style="background:#f2f2f2 !important; border-bottom: 2px solid #ccc;"></tr>');
	}

	// ~~3. Filter-Zeile erstellen~~		// Wir zählen die Spalten basierend auf der ersten Datenzeile
	var ~~$filterRow~~ = $('~~<tr class="filter-row unsortable" style="background:#f9f9f9;"></tr>~~');		var columnCount = $firstDataRow.find('td').length;

	~~$headerRow.find('th').each(function~~(i) {		for (var i = 0; i < columnCount; i++) {
	var $filterCell = $('<~~th class="unsortable"~~ style="padding:~~2px~~;"></th>');		var $filterCell = $('<td style="padding:4px;"></td>');
	var $select = $('<select style="width:100%; font-weight:normal; font-size:0.85em;"><option value="">(Alle)</option></select>');		var $select = $('<select style="width:100%; font-weight:normal; font-size:0.85em;"><option value="">(Alle)</option></select>');

	// Klick-Stop ~~für~~ Sortierung		// Klick-Stop: Verhindert, dass das Klicken im Dropdown die Sortierung triggert
	$select.on('click mousedown', function(e) { e.stopPropagation(); });		$select.on('click mousedown', function(e) {
			e.stopPropagation();
			});

	// Werte sammeln		// Werte sammeln aus allen Spalten (i-ter Index)
	var values = [];		var values = [];
	$~~dataRows~~.each(function() {		$table.find('tr').has('td').not('.filter-row').each(function() {
	var txt = $(this).find('td').eq(i).text().trim();		var txt = $(this).find('td').eq(i).text().trim();
	if (txt !== "" && $.inArray(txt, values) === -1) {		if (txt !== "" && $.inArray(txt, values) === -1) {
Zeile 50:		Zeile 43:

	$select.on('change', function() {		$select.on('change', function() {
	~~console.log("Filter geändert in Spalte " + i);~~
	runFilter($table);		runFilter($table);
	});		});
Zeile 56:		Zeile 48:
	$filterCell.append($select);		$filterCell.append($select);
	$filterRow.append($filterCell);		$filterRow.append($filterCell);
	});		}

	// ~~4. Einfügen~~		// Trick: Wir fügen die Filter-Zeile in den tbody ein, VOR die erste Datenzeile
	$~~headerRow~~.~~after~~($filterRow);		$firstDataRow.before($filterRow);
	console.log("Tabelle " + tIndex + ": Filter~~-Zeile eingefügt~~.");
			// MediaWiki mitteilen, dass sich die Tabelle geändert hat,
			// aber wir markieren die Zeile für den Sorter als "keine Daten"
			$table.trigger('update');

			console.log("Tabelle " + tIndex + ": Filter erfolgreich vor Datenzeilen platziert.");
	});		});
	});		});

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

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

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

Rbritt am 24. Februar 2026 um 08:19 Uhr

2026-02-24T08:19:40Z

← Nächstältere Version		Version vom 24. Februar 2026, 08:19 Uhr
Zeile 1:		Zeile 1:
	$(function() {		$(function() {
	~~// Wir warten, bis das Tablesorter~~-~~Modul von MediaWiki bereit ist~~		console.log("Filter-Skript: Start...");

	mw.loader.using(['jquery.tablesorter'], function() {		mw.loader.using(['jquery.tablesorter'], function() {
			console.log("Filter-Skript: Tablesorter geladen.");
	$('table.filterable').each(function() {
			$('table.filterable').each(function(tIndex) {
	var $table = $(this);		var $table = $(this);
			console.log("Tabelle " + tIndex + " gefunden.");
	// 1. ~~Alle echten~~ Datenzeilen ~~identifizieren (die <td> enthalten)~~
	var $dataRows = $table.find('tr').filter(function() {		// 1. Datenzeilen finden
			var $dataRows = $table.find('tbody tr').filter(function() {
	return $(this).find('td').length > 0;		return $(this).find('td').length > 0;
	});		});
			console.log("Tabelle " + tIndex + ": " + $dataRows.length + " Datenzeilen erkannt.");

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

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

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

	$headerRow.find('th').each(function(~~index~~) {		$headerRow.find('th').each(function(i) {
	var $filterCell = $('<th class="unsortable"></th>');		var $filterCell = $('<th class="unsortable" style="padding:2px;"></th>');
	var $select = $('<select style="width:100%; font-weight:normal; font-size:0.~~9em~~;"><option value="">(Alle)</option></select>');		var $select = $('<select style="width:100%; font-weight:normal; font-size:0.85em;"><option value="">(Alle)</option></select>');

	// Klick-~~Event isolieren (wichtig~~ für Sortierung!)		// Klick-Stop für Sortierung
	$select.on('click mousedown', function(e) {		$select.on('click mousedown', function(e) { e.stopPropagation(); });
	e.stopPropagation();
	});

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

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

	$select.on('change', function() {		$select.on('change', function() {
			console.log("Filter geändert in Spalte " + i);
	runFilter($table);		runFilter($table);
	});		});
Zeile 51:		Zeile 58:
	});		});

	// 4. ~~Filterzeile direkt nach dem Header einfügen~~		// 4. Einfügen
	$headerRow.after($filterRow);		$headerRow.after($filterRow);
			console.log("Tabelle " + tIndex + ": Filter-Zeile eingefügt.");
	~~// 5~~. ~~MediaWiki Sortierung neu triggern, damit die Filterzeile ignoriert wird~~
	~~$table~~.~~tablesorter(~~);
	});		});
	});		});

	function runFilter($table) {		function runFilter($table) {
	var $rows = $table.find('tr').~~filter(function() {~~		var $rows = $table.find('tbody tr').not('.filter-row');
	~~return $(this).find~~('~~td').length > 0 && !$(this)~~.~~hasClass('~~filter-row');
	});
	var $selects = $table.find('.filter-row select');		var $selects = $table.find('.filter-row select');

Rbritt am 24. Februar 2026 um 08:17 Uhr

2026-02-24T08:17:13Z

← Nächstältere Version		Version vom 24. Februar 2026, 08:17 Uhr
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);
	});		});
	}		}
	});		});

Rbritt: Änderung 524 von Rbritt (Diskussion) rückgängig gemacht.

2026-02-24T08:14:55Z

Änderung 524 von Rbritt (Diskussion) rückgängig gemacht.

← Nächstältere Version		Version vom 24. Februar 2026, 08:14 Uhr
Zeile 1:		Zeile 1:
	$(function() {		$(function() {
	// ~~Sicherstellen~~, ~~dass das Tablesorter-Modul geladen ist~~		// Wir warten kurz, bis MediaWiki die Tabelle fertig gerendert hat
	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);
	// Header ~~finden~~		// Wir suchen alle echten Datenzeilen (ignorieren den Header)
	var $~~thead~~ = $table.find('~~thead~~');		var $rows = $table.find('tbody tr').not(function() {
	if (~~$thead.length === 0~~) {		return $(this).find('th').length > 0;
	~~// Falls kein thead existiert (Standard-Wikitext), erstellen wir eine logische Trennung~~		});
	~~$thead =~~ $(~~'<thead></thead>'~~)~~.prependTo($table);~~
	~~$table~~.find('~~tr:first~~').~~appendTo($thead)~~;		var $headerRow = $table.find('tr').first();
	}		var $filterRow = $('<tr class="filter-row"></tr>');

	var $headerRow = $~~thead~~.find('tr').first();
	~~// Die Filter-Zeile bekommt die Klasse "unsortable", damit MediaWiki sie ignoriert~~
	var $filterRow = $('<tr class="filter-row ~~unsortable~~"></tr>');

	$headerRow.find('th').each(function(index) {		$headerRow.find('th').each(function(index) {
	var $filterCell = $('<th style="background:#f2f2f2~~; cursor:default~~;"></th>');		var $filterCell = $('<th style="background:#f2f2f2;"></th>');
	var $select = $('<select style="width: 100%; ~~font~~-~~weight~~:~~normal~~;"><option value="">(Alle)</option></select>');		var $select = $('<select style="width: 100%; min-width: 60px;"><option value="">(Alle)</option></select>');

	// ~~Verhindert~~, ~~dass ein Klick auf~~ das ~~Dropdown die Sortierung der Spalte auslöst~~		// Klick-Event stoppen, damit die Tabelle nicht sortiert wird, wenn man das Menü öffnet
	$select.on('click', function(e) {		$select.on('click mousedown', function(e) {
	e.stopPropagation();		e.stopPropagation();
	});		});

	// ~~Alle~~ Werte ~~aus den Datenzellen (td) dieser Spalte~~ sammeln		// Werte sammeln
	var values = [];		var values = [];
	$~~table.find('tbody tr td:nth-child(' + (index + 1) + ')')~~.each(function() {		$rows.each(function() {
	var text = $(this).text().trim();		var text = $(this).find('td').eq(index).text().trim();
	if (text !== "" && $.inArray(text, values) === -1) {		if (text !== "" && $.inArray(text, values) === -1) {
	values.push(text);		values.push(text);
Zeile 35:		Zeile 31:
	});		});

			// 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 40:		Zeile 37:

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

Zeile 47:		Zeile 44:
	});		});

	// ~~Die Filter-Zeile wird fest in den~~ Header ~~unter die Titelzeile gehängt~~		// Filterzeile nach dem Header einfügen
	$~~thead~~.~~append~~($filterRow);		$headerRow.after($filterRow);

	~~// MediaWiki sagen, dass es die Tabelle neu einlesen soll (wegen der neuen Zeile)~~
	~~$table.tablesorter(~~);
	});		});
	});		});

	function ~~applyFilters~~($table) {		function filterTable($table) {
	var $rows = $table.find('tbody tr').not('.filter-row');		var $rows = $table.find('tbody tr').not('.filter-row').not(function() {
			return $(this).find('th').length > 0;
			});
	var $selects = $table.find('.filter-row select');		var $selects = $table.find('.filter-row select');

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

	$selects.each(function(index) {		$selects.each(function(index) {
Zeile 68:		Zeile 64:

	if (filterValue !== "" && cellValue !== filterValue) {		if (filterValue !== "" && cellValue !== filterValue) {
	~~isVisible~~ = false;		showRow = false;
	return false; ~~// Loop abbrechen~~		return false;
	}		}
	});		});
			$row.toggle(showRow);
	$row.toggle(~~isVisible~~);
	});		});
	}		}
	});		});

Rbritt am 24. Februar 2026 um 08:14 Uhr

2026-02-24T08:14:09Z

← Nächstältere Version		Version vom 24. Februar 2026, 08:14 Uhr
Zeile 1:		Zeile 1:
	$(function() {		$(function() {
	// ~~Wir warten kurz~~, ~~bis MediaWiki die Tabelle fertig gerendert hat~~		// Sicherstellen, dass das Tablesorter-Modul geladen 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)		// Header finden
	var $~~rows~~ = $table.find('~~tbody tr~~').~~not(function~~() {		var $thead = $table.find('thead');
	~~return~~ $(~~this~~).find('th').~~length > 0~~;		if ($thead.length === 0) {
	});		// Falls kein thead existiert (Standard-Wikitext), erstellen wir eine logische Trennung
			$thead = $('<thead></thead>').prependTo($table);
	var $headerRow = $~~table~~.find('tr').first();		$table.find('tr:first').appendTo($thead);
	var $filterRow = $('<tr class="filter-row"></tr>');		}

			var $headerRow = $thead.find('tr').first();
			// Die Filter-Zeile bekommt die Klasse "unsortable", damit MediaWiki sie ignoriert
			var $filterRow = $('<tr class="filter-row unsortable"></tr>');

	$headerRow.find('th').each(function(index) {		$headerRow.find('th').each(function(index) {
	var $filterCell = $('<th style="background:#f2f2f2;"></th>');		var $filterCell = $('<th style="background:#f2f2f2; cursor:default;"></th>');
	var $select = $('<select style="width: 100%; ~~min~~-~~width~~: ~~60px~~;"><option value="">(Alle)</option></select>');		var $select = $('<select style="width: 100%; font-weight:normal;"><option value="">(Alle)</option></select>');

	// Klick~~-Event stoppen, damit~~ die ~~Tabelle nicht sortiert wird, wenn man das Menü öffnet~~		// Verhindert, dass ein Klick auf das Dropdown die Sortierung der Spalte auslöst
	$select.on('click ~~mousedown~~', function(e) {		$select.on('click', function(e) {
	e.stopPropagation();		e.stopPropagation();
	});		});

	// Werte sammeln		// Alle Werte aus den Datenzellen (td) dieser Spalte sammeln
	var values = [];		var values = [];
	$~~rows~~.each(function() {		$table.find('tbody tr td:nth-child(' + (index + 1) + ')').each(function() {
	var text = $(this~~).find('td').eq(index~~).text().trim();		var text = $(this).text().trim();
	if (text !== "" && $.inArray(text, values) === -1) {		if (text !== "" && $.inArray(text, values) === -1) {
	values.push(text);		values.push(text);
Zeile 31:		Zeile 35:
	});		});

	~~// 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 40:

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

Zeile 44:		Zeile 47:
	});		});

	// ~~Filterzeile nach dem~~ Header ~~einfügen~~		// Die Filter-Zeile wird fest in den Header unter die Titelzeile gehängt
	$~~headerRow~~.~~after~~($filterRow);		$thead.append($filterRow);

			// MediaWiki sagen, dass es die Tabelle neu einlesen soll (wegen der neuen Zeile)
			$table.tablesorter();
	});		});
	});		});

	function ~~filterTable~~($table) {		function applyFilters($table) {
	var $rows = $table.find('tbody tr').not('.filter-row'~~).not(function() {~~		var $rows = $table.find('tbody tr').not('.filter-row');
	~~return $(this).find('th').length > 0;~~
	});
	var $selects = $table.find('.filter-row select');		var $selects = $table.find('.filter-row select');

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

	$selects.each(function(index) {		$selects.each(function(index) {
Zeile 64:		Zeile 68:

	if (filterValue !== "" && cellValue !== filterValue) {		if (filterValue !== "" && cellValue !== filterValue) {
	~~showRow~~ = false;		isVisible = false;
	return false;		return false; // Loop abbrechen
	}		}
	});		});
	$row.toggle(~~showRow~~);
			$row.toggle(isVisible);
	});		});
	}		}
	});		});

Rbritt am 24. Februar 2026 um 08:09 Uhr

2026-02-24T08:09:43Z

← Nächstältere Version		Version vom 24. Februar 2026, 08:09 Uhr
Zeile 1:		Zeile 1:
	$(function() {		$(function() {
	$('table.filterable').each(function() {		// Wir warten kurz, bis MediaWiki die Tabelle fertig gerendert hat
	var $table = $(this);		mw.loader.using(['jquery.tablesorter'], function() {
	var $headerRow = $table.find('tr').first();
	var $filterRow = $('<tr class="filter-row"></tr>');		$('table.filterable').each(function() {
	var $rows = $~~table~~.find('~~tbody > tr~~').~~not~~(~~':first'~~);		var $table = $(this);
			// Wir suchen alle echten Datenzeilen (ignorieren den Header)
			var $rows = $table.find('tbody tr').not(function() {
			return $(this).find('th').length > 0;
			});

			var $headerRow = $table.find('tr').first();
			var $filterRow = $('<tr class="filter-row"></tr>');

			$headerRow.find('th').each(function(index) {
			var $filterCell = $('<th style="background:#f2f2f2;"></th>');
			var $select = $('<select style="width: 100%; min-width: 60px;"><option value="">(Alle)</option></select>');

			// Klick-Event stoppen, damit die Tabelle nicht sortiert wird, wenn man das Menü öffnet
			$select.on('click mousedown', function(e) {
			e.stopPropagation();
			});

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

	~~$headerRow~~.~~find~~(~~'th'~~).~~each~~(function(~~index~~) {		// Sortieren und hinzufügen
	~~var $filterCell =~~ $(~~'<th></th>');~~		values.sort().forEach(function(val) {
	~~var $select =~~ $('~~<select style="width: 100%;">~~<option ~~value=""~~>~~Alle~~</option~~></select~~>');		$select.append($('<option></option>').val(val).text(val));
			});
	~~// 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~~		$select.on('change', function() {
	~~values.sort().forEach(function(val) {~~		filterTable($table);
	$select.~~append($~~('~~<option></option>~~'~~).val~~(~~val~~)~~.html~~(~~val)~~);		});
	});

	$~~select~~.~~on('change', function~~() {		$filterCell.append($select);
	~~filterTable~~($~~table~~);		$filterRow.append($filterCell);
	});		});

	~~$filterCell.append($select);~~		// Filterzeile nach dem Header einfügen
	$~~filterRow~~.~~append~~($~~filterCell~~);		$headerRow.after($filterRow);
	});		});

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

	function filterTable($table) {		function filterTable($table) {
	var $rows = $table.find('tbody > tr').not('~~:first~~').not('.~~filter-row'~~);		var $rows = $table.find('tbody tr').not('.filter-row').not(function() {
			return $(this).find('th').length > 0;
			});
	var $selects = $table.find('.filter-row select');		var $selects = $table.find('.filter-row select');

Zeile 52:		Zeile 68:
	}		}
	});		});

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

Rbritt am 24. Februar 2026 um 08:04 Uhr

2026-02-24T08:04:10Z

← Nächstältere Version		Version vom 24. Februar 2026, 08:04 Uhr
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;
	}		}
	});		});

Rbritt am 24. Februar 2026 um 08:01 Uhr

2026-02-24T08:01:14Z

@@ Zeile 1: / Zeile 1: @@
-/* Das folgende JavaScript wird für alle Benutzer geladen. */
+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.
-            // Filter-Eingabefeld vor der Tabelle einfügen
+Da MediaWiki die jQuery-Bibliothek standardmäßig lädt, nutzen wir diese, um eine schlanke und performante Lösung zu bauen.
-            $input.on('keyup', function() {
+Die Lösung: Ein dynamischer Header-Filter
-                var value = $(this).val().toLowerCase();
+Dieser Code fügt automatisch ein Eingabefeld in jede Spalte einer Tabelle ein, die die Klasse filterable besitzt.
-                // Nur die Zeilen im <tbody> filtern, Kopfzeilen bleiben sichtbar
+. Das JavaScript
-                $table.find('tbody tr').filter(function() {
+Kopiere diesen Code in deine Seite MediaWiki:Common.js:
-                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
-                 });
+JavaScript
              });
          });
      });
 });