Actions

MediaWiki

MediaWiki:Common.js

From SUALEX

Revision as of 19:56, 23 January 2026 by Jawad (talk | contribs) (Created page with "Any JavaScript here will be loaded for all users on every page load.: mw.loader.using(['jquery'], function () { function initColumnSearch($table) { var $thead = $table.find('thead'); var $rows = $table.find('tbody tr'); if ($thead.length === 0) { var $firstRow = $table.find('tr').first(); $thead = $('<thead>').append($firstRow.clone()); $firstRow.remove(); $table.prepend($thead); } var $headerRow = $thead.find('tr')....")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Any JavaScript here will be loaded for all users on every page load. */
mw.loader.using(['jquery'], function () {

  function initColumnSearch($table) {
    var $thead = $table.find('thead');
    var $rows  = $table.find('tbody tr');

    if ($thead.length === 0) {
      var $firstRow = $table.find('tr').first();
      $thead = $('<thead>').append($firstRow.clone());
      $firstRow.remove();
      $table.prepend($thead);
    }

    var $headerRow = $thead.find('tr').last(); // REAL header
    var $filterRow = $('<tr class="searchable-row">');

    $headerRow.find('th').each(function (colIndex) {
      var $input = $('<input>', {
        type: 'search',
        placeholder: 'Search…'
      }).css({
        width: '95%',
        boxSizing: 'border-box'
      });

      $filterRow.append($('<th>').append($input));
    });

    $headerRow.before($filterRow);

    $filterRow.find('input').on('input', function () {
      var filters = [];

      $filterRow.find('input').each(function () {
        filters.push($(this).val().toLowerCase());
      });

      $rows.each(function () {
        var $cells = $(this).find('td');
        var visible = true;

        filters.forEach(function (text, i) {
          if (!text) return;
          if (!$cells.eq(i).text().toLowerCase().includes(text)) {
            visible = false;
          }
        });

        $(this).toggle(visible);
      });
    });
  }

  $(function () {
    $('table.searchable.sortable').each(function () {
      initColumnSearch($(this));
    });
  });
});