MediaWiki:Common.js: Difference between revisions
Appearance
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 2: | Line 2: | ||
#Filterable tables | #Filterable tables | ||
mw.loader.using(['jquery'], function () { | |||
function | $(document).ready(function () { | ||
function addFiltersToTable(table) { | |||
var thead = $(table).find("thead"); | |||
if (thead.length === 0) { | |||
// If no thead exists, create one from the first row | |||
var firstRow = $(table).find("tr:first"); | |||
thead = $("<thead></thead>").append(firstRow.clone()); | |||
$(table).prepend(thead); | |||
} | |||
var headerRow = thead.find("tr:first"); | |||
var filterRow = $("<tr></tr>"); | |||
headerRow.find("th").each(function (colIndex) { | |||
var filterCell = $("<th></th>"); | |||
var input = $("<input>").attr({ | |||
"type": "text", | |||
"placeholder": "Filter...", | |||
"class": "table-filter" | |||
}); | |||
input.on("keyup", function () { | |||
var filterText = $(this).val().toLowerCase(); | |||
$(table).find("tbody tr").each(function () { | |||
var cellText = $(this).find("td").eq(colIndex).text().toLowerCase(); | |||
$(this).toggle(cellText.indexOf(filterText) > -1); | |||
}); | |||
}); | |||
filterCell.append(input); | |||
filterRow.append(filterCell); | |||
}); | |||
thead.append(filterRow); | |||
} | |||
// Apply to all tables with class 'filterable-table' | |||
$("table.filterable-table").each(function () { | |||
addFiltersToTable(this); | |||
}); | |||
}); | |||
}); |
Revision as of 21:03, 11 March 2025
/* Any JavaScript here will be loaded for all users on every page load. */ #Filterable tables mw.loader.using(['jquery'], function () { $(document).ready(function () { function addFiltersToTable(table) { var thead = $(table).find("thead"); if (thead.length === 0) { // If no thead exists, create one from the first row var firstRow = $(table).find("tr:first"); thead = $("<thead></thead>").append(firstRow.clone()); $(table).prepend(thead); } var headerRow = thead.find("tr:first"); var filterRow = $("<tr></tr>"); headerRow.find("th").each(function (colIndex) { var filterCell = $("<th></th>"); var input = $("<input>").attr({ "type": "text", "placeholder": "Filter...", "class": "table-filter" }); input.on("keyup", function () { var filterText = $(this).val().toLowerCase(); $(table).find("tbody tr").each(function () { var cellText = $(this).find("td").eq(colIndex).text().toLowerCase(); $(this).toggle(cellText.indexOf(filterText) > -1); }); }); filterCell.append(input); filterRow.append(filterCell); }); thead.append(filterRow); } // Apply to all tables with class 'filterable-table' $("table.filterable-table").each(function () { addFiltersToTable(this); }); }); });