|
|
| Line 9: |
Line 9: |
| .then(function() { | | .then(function() { |
| console.log('DataTables erfolgreich geladen! Initialisiere Tabelle...'); | | 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) { | | .catch(function(err) { |
| console.error('Fehler beim Laden von DataTables:', err); | | console.error('Fehler beim Laden von DataTables:', err); |
| }); | | }); |