Webseiten-Manipulation: Lange Tabellen aufsplitten (ja, wirklich)

Ich sag's gleich: Hier geht's um obskure Bastelei, die vermutlich nur seeehr wenige Menschen nützlich finden ;) Obwohl ... Jedenfalls geht es auf einen konkreten Wunsch eines Checkmk-Nutzers zurück: In der Monitoring-Software gibt es Listen mit Services (CPU-Nutzung, RAM-Auslastung etc.), die bisweilen sehr lang sind. Da kam die Frage auf, ob man nach einer Anzahl an Zeilen nicht "Seiten" einfügen könnte. So, wie man es auch von Suchergebnissen gewohnt ist. Jein.

Gewünscht, gebaut

Nein, Checkmk selbst bietet diese Möglichkeit nicht. Wobei selbst dieser Teil des Jeins eher ein Jein ist: Zeilen lassen sich sehr wohl beschränken, allerdings nur in der Konfigurationsansicht (quasi dem Backend). In der Monitoring-Ansicht (quasi dem Frontend) gibt es stattdessen massenhaft Filtermöglichkeiten. Ist aber auch egal, war ja nur der Ausgangspunkt.

So ganz ohne Lösung wollte ich den armen Menschen dann aber auch nicht stehen lassen. Kürzlich habe ich noch im Artikel Make the Nachrichten fun again Spaß mit JavaScript in den Entwickler-Tool gehabt. Aber das kann auch nützlich sein: Ein kleines JavaScript-Snippet, das schlicht alle Tabellen auf der aktuellen Seite nach X Zeilen in einzelne Seiten aufteilt.

Tabellen-Aufteiler

Hier zunächst mal das Skript - und falls Ihr Fragen habt, fragt ChatGPT, den exakten Code habe ich mir erfragt:

(function() {
    // Function to create pagination for a given table
    function paginateTable(table, rowsPerPage) {
        const rows = Array.from(table.querySelectorAll('tbody tr'));
        const pageCount = Math.ceil(rows.length / rowsPerPage);

        // Create pagination controls
        const paginationControls = document.createElement('div');
        paginationControls.className = 'pagination-controls';

        for (let i = 1; i <= pageCount; i++) {
            const pageButton = document.createElement('button');
            pageButton.textContent = i;
            pageButton.addEventListener('click', () => showPage(i));
            paginationControls.appendChild(pageButton);
        }

        // Function to show specific page
        function showPage(pageNumber) {
            rows.forEach((row, index) => {
                row.style.display = (index >= (pageNumber - 1) * rowsPerPage && index < pageNumber * rowsPerPage) ? '' : 'none';
            });
        }

        // Initial display of the first page
        showPage(1);

        // Insert pagination controls after the table
        table.parentNode.insertBefore(paginationControls, table.nextSibling);
    }

    // Apply pagination to all tables on the page
    document.querySelectorAll('table').forEach(table => paginateTable(table, 10));
})();

Zum Testen bietet sich die Konsole in den Entwickler-Tools (F12) an. Falls das tatsächlich jemand regelmäßig nutzen möchte: Einfach ein Bookmarklet anlegen, also ein Bookmarkt in der Bookmark-Leiste mit Skript statt URL. Wir haben auch ein noch nerdigeres Beispiel, das das im Detail zeigt - und wie man daraus direkt ein echtes Plugin macht.

In Checkmk sieht das dann so aus:

Versprochen, das wird nicht immer so einfach funktionieren! Und auch hier musste erstmal die richtige URL her, in der normalen Checkmk-Ansicht war die Tabelle irgendwie eingebettet, zack, Skript kaputt. Nehmt es also wie üblich als Anregung für eigene Basteleien.

Als Testseite funktioniert übrigens htmltables.io.

Und wenn Euch diese Bastelei nicht absurd genug war: Abhaken-GUI-Maker.