Mini Widgets
Pagination
Pagination
AI Defaults
- Function name
- `arcCustomPagination`.
- uniqueId
- Required, e.g. `"pagination-" + Nr`.
- recordId
- Required, use raw `Nr`.
- field
- Required, the field storing current page number (`fieldId(Nr, "Feldname")`).
- totalPages
- Total number of pages (computed from data count / items per page).
- currentPage
- Current page value from the field.
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 <a href="/documentation/custom-table">Liste sehr viele Einträge</a> 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:
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
<figure><table><tbody><tr><th>Parameter
</th><th>Typ
</th><th>Beschreibung
</th></tr><tr><td>uniqueId
</td><td>Text
</td><td>Eindeutige ID für das Pagination-Element. Pflichtfeld.
</td></tr><tr><td>editable
</td><td>Boolean
</td><td>Ermöglicht manuelle Eingabe der Seitenzahl im Input-Feld.
</td></tr><tr><td>recordId
</td><td>Text
</td><td>ID des aktuellen Datensatzes, auf den das Update erfolgt. (Die Aktion ausgeführt wird)
</td></tr><tr><td>fieldId
</td><td>Text
</td><td>Das Feld, das die aktuelle Seite speichert.
</td></tr><tr><td>direction
</td><td>Text
</td><td>Layout der Pagination: "horizontal" (Standard) oder "vertical".
</td></tr><tr><td>title
</td><td>Text
</td><td>Der aktuell angezeigte Wert im Input-Feld.
</td></tr><tr><td>value
</td><td>Zahl
</td><td>Aktuelle Seitenzahl – wichtig für Navigation und Bedingung von Buttons.
</td></tr><tr><td>total
</td><td>Zahl
</td><td>Gesamtzahl an Seiten (z. B. ceil(cnt(list) / 30)).
</td></tr><tr><td>totalPrefix
</td><td>Text
</td><td>Kleiner Zusatz vor der Gesamtseitenanzahl, z. B. " von ".
</td></tr><tr><td>valuePrefix
</td><td>Text
</td><td>Optionaler String, der beim Update vor die Seitenzahl gesetzt wird.
</td></tr><tr><td>buttonFirst
</td><td>Widget
</td><td>Optionaler Inhalt (Text oder Widget) für den „erste Seite“-Button.
</td></tr><tr><td>buttonMinus
</td><td>Widget
</td><td>Optionaler Inhalt (Text oder Widget) für den „zurück“-Button.
</td></tr><tr><td>buttonPlus
</td><td>Widget
</td><td>Optionaler Inhalt (Text oder Widget) für den „vor“-Button.
</td></tr><tr><td>buttonLast
</td><td>Widget
</td><td>Optionaler Inhalt (Text oder Widget) für den „letzte Seite“-Button.
</td></tr></tbody></table></figure>## 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)</code></pre>
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. 🚀