Mini Widgets

Pagination

1.1.2

Widget bestellen

arcCustomPagination

Mit arcCustomPagination lassen sich Inhalte elegant seitenweise anzeigen – besonders bei langen Listen oder Tabellen ist das ein echter Gamechanger in puncto Performance und Übersichtlichkeit. Statt alle Datensätze auf einmal zu laden, werden nur die gerade sichtbaren Einträge angezeigt. Das spart Ladezeit und macht deine Oberfläche deutlich flüssiger.

Wann sollte man Pagination einsetzen?

Pagination empfiehlt sich vor allem dann, wenn:

eine Liste sehr viele Einträge enthält (z. B. Nachrichten, Projekte, Kunden),
das Rendering durch zu viele gleichzeitig geladene Elemente langsam wird,
eine bessere Nutzerführung durch Seitenzahlen gewünscht ist,
du UI/UX optimieren willst, z. B. für mobile Endgeräte.

Beispiel für paginierte Liste

Bevor du deine Liste paginierst, musst du erstmal die Ninox-Liste an sich definieren. Mit dieser Schleife wird nur der entsprechende Abschnitt aus der Gesamtliste geladen – abhängig von der aktuellen Seitenzahl:

let current := this;
let maxEntries := 30;
let currentPage := 'Aktuelle Seite'; // Zahlenfeld in Ninox
let list := select Nachrichten; // Ninox-Tabelle
let paginatedList := unique(record(Nachrichten,0))[!= 0];
for listItem in slice(list.Nr, maxEntries * (currentPage - 1), maxEntries * currentPage) do
	paginatedList := unique(paginatedList, record(Nachrichten,listItem))
end;

Anwendungscode für das Widget

Diesen Anwendungscode fügst du an der Stelle ein, an der du die Pagination anzeigen lassen möchtest.

arcCustomPagination({
		uniqueId: Nr,
		editable: true,
		recordId: Nr,
		fieldId: "S1", // fieldId vom Ninox Feld "Aktuelle Seite"
		direction: "horizontal",
		title: current.'Aktuelle Seite',
		value: current.'Aktuelle Seite',
		total: ceil(cnt(list) / 30),
		totalPrefix: " von "
})

Parameter

Parameter	Typ	Beschreibung
`uniqueId`	Text	Eindeutige ID für das Pagination-Element. Pflichtfeld.
`editable`	Boolean	Ermöglicht manuelle Eingabe der Seitenzahl im Input-Feld.
`recordId`	Text	ID des aktuellen Datensatzes, auf den das Update erfolgt. (Die Aktion ausgeführt wird)
`fieldId`	Text	Das Feld, das die aktuelle Seite speichert.
`direction`	Text	Layout der Pagination: `"horizontal"` (Standard) oder `"vertical"`.
`title`	Text	Der aktuell angezeigte Wert im Input-Feld.
`value`	Zahl	Aktuelle Seitenzahl – wichtig für Navigation und Bedingung von Buttons.
`total`	Zahl	Gesamtzahl an Seiten (z. B. `ceil(cnt(list) / 30)`).
`totalPrefix`	Text	Kleiner Zusatz vor der Gesamtseitenanzahl, z. B. `" von "`.
`valuePrefix`	Text	Optionaler String, der beim Update vor die Seitenzahl gesetzt wird.
`buttonFirst`	Widget	Optionaler Inhalt (Text oder Widget) für den „erste Seite“-Button.
`buttonMinus`	Widget	Optionaler Inhalt (Text oder Widget) für den „zurück“-Button.
`buttonPlus`	Widget	Optionaler Inhalt (Text oder Widget) für den „vor“-Button.
`buttonLast`	Widget	Optionaler Inhalt (Text oder Widget) für den „letzte Seite“-Button.

Aufbau in einer Custom Table

let current := this;
let projectList := filteredList_Personen;
let current := this;
let maxEntries := 'Einträge pro Seite';
let currentPage := 'Aktuelle Seite';
let list := filteredList_Personen;
let paginatedList := unique(record('Stammdaten Person',0))[!= 0];
for listItem in slice(list.Nr, maxEntries * (currentPage - 1), maxEntries * currentPage) do
	paginatedList := unique(paginatedList, record('Stammdaten Person',listItem))
end;
let data := {
		uniqueListId: "Personen " + Nr,
		tableId: tableId(first(projectList)),
		height: "100%",
		embedded: true,
		table: paginatedList.[{
				recordId: Nr,
				groupRowColor: text(designSystem().colors.borderBlue),
				rowHeight: "auto",
				rowPaddingY: "5px",
				columns: [{
						field: "Name",
						title: "Name",
						align: "left",
						value: data.name
					}, {
						field: "Typ",
						title: "Typ",
						width: "120px",
						align: "left",
						value: html(data.monteur.badge)
						
					},
						{
							field: "Adresse",
							title: "Adresse",
							align: "left",
							alignY: "center",
							value: data.address.block,
						}
					]
			}],
		footer: {
			showFooter: true,
			showActionButton: false,
			leftSideContent:"",
			rightSideContent: arcCustomPagination({
					uniqueId: "pagination-person" + Nr,
					editable: true,
					recordId: Nr,
					fieldId: fieldId(current.Nr, "Aktuelle Seite"),
					direction: "horizontal",
					title: current.'Aktuelle Seite',
					value: current.'Aktuelle Seite',
					total: ceil(cnt(list) / 'Einträge pro Seite'),
					totalPrefix: " von "
				})
		}
	};
arcCustomTable(data)

Anwendungscode Complex

arcCustomPagination({
					uniqueId: Nr,
					editable: true,
					recordId: Nr,
					fieldId: "E2",
					direction: "horizontal",
					title: current.'Aktuelle Seite',
					value: current.'Aktuelle Seite',
					total: ceil(cnt(list) / maxEntries),
					totalPrefix: " von ",
					buttonMinus: arcCustomButton({
							uniqueId: "ButtonMinus" + Nr,
							icon: arcCustomIcon({
									name: "caret-left",
									color: "#555",
									size: 20
								}),
							fontSize: "18px",
							fontColor: "",
							iconColor: "",
							backgroundColor: "transparent",
							borderColor: "transparent"
						}),
					buttonPlus: arcCustomButton({
							uniqueId: "ButtonPlus" + Nr,
							icon: arcCustomIcon({
									name: "caret-right",
									color: "#555",
									size: 20
								}),
							fontSize: "18px",
							fontColor: "",
							iconColor: "",
							backgroundColor: "transparent",
							borderColor: "transparent"
						}),
					buttonFirst: arcCustomButton({
							uniqueId: "ButtonFirst" + Nr,
							icon: arcCustomIcon({
									name: "caret-double-left",
									color: "#555",
									size: 20
								}),
							fontSize: "18px",
							fontColor: "",
							iconColor: "",
							backgroundColor: "transparent",
							borderColor: "transparent"
						}),
					buttonLast: arcCustomButton({
							uniqueId: "ButtonLast" + Nr,
							icon: arcCustomIcon({
									name: "caret-double-right",
									color: "#555",
									size: 20
								}),
							fontSize: "18px",
							fontColor: "",
							iconColor: "",
							backgroundColor: "transparent",
							borderColor: "transparent"
						})
				})

💡 Pro-Tipp: Wenn du mehrere Listen auf einer Seite anzeigen willst, kannst du mit verschiedenen uniqueId-Werten und eigenen fieldId-Felder für jede Liste eine eigene Pagination bauen. So bleibt alles unabhängig.

Fazit

arcCustomPagination ist perfekt, um große Datenmengen elegant, performant und nutzerfreundlich zu präsentieren. Ein Muss für alle, die mit langen Listen arbeiten – egal ob im CRM, bei Projekten oder Support-Tickets.

Let’s paginate smart. 🚀