MediaWiki:Common.js

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.

/* Data Tables */
console.log('DataTables-Skript wird geladen...');

// DataTables JS nachladen und dann initialisieren
mw.loader.getScript('https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js')
.then(function() {
    console.log('DataTables erfolgreich geladen! Initialisiere Tabelle...');
    $(document).ready(function() {
        $('#catalog').DataTable({
            paging: true,
            pageLength: 100,
            searching: true,
            ordering: true,
            lengthMenu: [ [10, 25, 50, 100, 200, 600], [10, 25, 50, 100, 200, 600] ],
            order: [[1, 'asc']],
            language: {
                search: "Suche:",
                lengthMenu: "Show _MENU_ Entries",
                zeroRecords: "No Matches",
                info: "Page _PAGE_ of _PAGES_",
                infoEmpty: "Empty",
                infoFiltered: "(out of _MAX_ total entries)"
            },
            initComplete: function () {
                // Fügt für jede Spalte ein Suchfeld hinzu
                this.api().columns().every(function () {
                    var column = this;
                    var header = $(column.header());
                    var columnTitle = header.text(); // Spaltentitel extrahieren
                    var input = $('<input type="text" placeholder="' + columnTitle + ' ..." style="width: 100%; padding: 5px;"/>')
                        .appendTo($(header).empty())  // Leert die Headerzelle und fügt das Eingabefeld ein
                        .on('keyup change', function () {
                            column.search(this.value).draw();  // Filtert die Spalte nach Eingabewerten
                        })
                        .on('click', function(e) {
                            e.stopPropagation(); // Verhindert, dass der Klick die Sortierung beeinflusst
                        });
                });
            }
        });
    });
})
.catch(function(err) {
    console.error('Fehler beim Laden von DataTables:', err);
});

// DataTables SearchBuilder + Abhängigkeiten
mw.loader.load('https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js');
mw.loader.load('https://cdn.datatables.net/searchbuilder/1.6.0/js/dataTables.searchBuilder.min.js');

// DataTable prüfen für SearchBuilder

$(document).ready(function () {
  // Prüft, ob eine Tabelle mit der Klasse .datatable vorhanden ist
  $('.datatable').DataTable({
    dom: 'Qlfrtip', // Q = SearchBuilder
    searchBuilder: true
  });
});