Teil 2: Tabulator konfigurieren und Events nutzen

Tabulator-Integration

Tabulator ist ein leistungsstarkes Tool, um interaktive Tabellen zu erstellen. Zuerst fügen wir die Bibliothek hinzu:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@5.4.0/dist/css/tabulator.min.css">
<script src="https://cdn.jsdelivr.net/npm/tabulator-tables@5.4.0/dist/js/tabulator.min.js"></script>

Tabelle einblenden

Fügen Sie ein div-Element hinzu, um Tabulator zu initialisieren:

<div id="table"></div>

Tabelle konfigurieren

Hier findet die API aus dem ersten Teil Anwendung. Sie lädt die Daten über einen Ajax-Call in die Tabelle.

// Tabulator Initialisierung
var table = new Tabulator("#table", {
	layout: "fitColumns",
	height: "400px",
	columns: [
		{ title: "Produkt", field: "produkt", sorter: "string" },
		{ title: "Bestellnummer", field: "bestellnummer", sorter: "number" },
		{ title: "Beschreibung", field: "beschreibung", sorter: "string" }
	],
	ajaxURL: "titles-endpoint.php" // URL des PHP-Endpunkts
});

Zunächst werden Dummy-Daten für Produkte definiert. Natürlich können die durch ein eingebettetes SQL auch konkret geladen werden. Die Spalten lassen sich sortieren und filtern, und wir können auf Zeilenklicks (einfach oder doppelt) reagieren.

Doppelklick-Ereignis

Erweitern wir die Tabelle um ein Doppelklick-Ereignis:

table.on("rowDblClick", function (e, row) {
    const data = row.getData();
    alert(`Bestellnummer: ${data.bestellnummer}`);
});

Tabulator bietet viele Optionen, um Tabellen interaktiv und dynamisch zu gestalten. Ich empfehle die wirklich ausgezeichnete Dokumentation. Die Demo-Seite bietet einen optimalen Überblick über alle Möglichkeiten dieses großartigen Software-Pakets.

Im letzten Teil widmen wir uns der Integration von Echarts.