Erstellen von Dynamischen Paging-Links - Vereinfachung der Navigation für Benutzer

Paging-Links sind entscheidend zur Verbesserung der Navigation in Anwendungen, die Listen von Elementen anzeigen, wie Foren oder Galerien. Eine nahtlose Paging-Erfahrung hilft Benutzern, ohne Verwirrung zwischen den Seiten zu wechseln. In diesem Blogbeitrag werden wir das Problem der Generierung dieser dynamischen Paging-Links untersuchen und eine robuste Lösung anbieten.

Bei der Gestaltung eines Systems zur Anzeige von Inhalten über mehrere Seiten stellt sich eine zentrale Frage: Wie generieren wir die Links, die es Benutzern ermöglichen, effektiv zwischen diesen Seiten zu navigieren?

Wenn sich ein Benutzer beispielsweise auf Seite 7 von 593 befindet, wie sollten die Paging-Links aufgebaut werden? Ein gängiges Layout könnte wie folgt aussehen:

1 ... 5 6 7 ... 593

In dem obigen Layout können Benutzer die erste Seite (1), die aktuelle Seite (7) und die letzte Seite (593) sowie die angrenzenden Seiten (5 und 6) sehen. Dieses Format hält die Navigation prägnant und benutzerfreundlich.

Nachfolgend finden Sie einen strukturierten Ansatz zur Erstellung dynamischer Paging-Links. Zuerst skizzieren wir die Merkmale, die im Algorithmus berücksichtigt werden sollten, und geben dann Pseudo-Code, um zu veranschaulichen, wie man ihn implementiert.

Schlüsselmerkmale des Paging-Algorithmus

  1. Zeigen Sie einen Link zur vorherigen Seite (Prev) an, wenn sich der Benutzer nicht auf der ersten Seite befindet.
  2. Zeigen Sie immer die Seitenzahl der ersten Seite an.
  3. Zeigen Sie die Seitenzahl der aktuellen Seite an.
  4. Fügen Sie die Seite vor und nach der aktuellen Seite hinzu.
  5. Zeigen Sie die Seitenzahl der letzten Seite an.
  6. Zeigen Sie einen Link zur nächsten Seite (Next) an, wenn sich der Benutzer nicht auf der letzten Seite befindet.

Der ursprüngliche Algorithmus ist ein guter Ausgangspunkt. Wir werden verschiedene Randfälle überprüfen und die Vorgehensweise entsprechend anpassen.

function printPageLinksFirstTry(num totalPages, num currentPage)
  if (currentPage > 1)
    print "Prev"
  print "1"
  print "..."
  print currentPage - 1
  print currentPage
  print currentPage + 1
  print "..."
  print totalPages
  if (currentPage < totalPages)
    print "Next"
endFunction

Umgang mit Randfällen: Verfeinerung der Logik

Wir müssen berücksichtigen, wenn die aktuelle Seite nah an den Rändern des Bereichs liegt. Dazu können wir die vorherige Funktion anpassen:

function printPageLinksHandleCloseToEnds(num totalPages, num currentPage)
  if (currentPage > 1)
    print "Prev"
  print "1"
  if (currentPage > 2)
    print "..."
  if (currentPage > 2)
    print currentPage - 1
  print currentPage
  if (currentPage < totalPages - 1)
    print currentPage + 1
    print "..."
  print totalPages
  if (currentPage < totalPages)
    print "Next"
endFunction

Aufräumen: Den Code optimieren

Während wir weiter verfeinern, können wir die Redundanz im Code verringern:

function printPageLinksCleanedUp(num totalPages, num currentPage)
  if (currentPage > 1)
    print "Prev"
  print "1"
  if (currentPage > 2)
    print "..."
    print currentPage - 1
  print currentPage
  if (currentPage < totalPages - 1)
    print currentPage + 1
    print "..."
  print totalPages
  if (currentPage < totalPages)
    print "Next"
endFunction

Letzte Anpassungen: Alle Szenarien berücksichtigen

Letztendlich stellen wir sicher, dass alles korrekt funktioniert, selbst wenn es nur wenige Seiten gibt:

function printPageLinksFinal(num totalPages, num currentPage)
  if (totalPages == 1)
    return

  if (currentPage > 1)
    print "Prev"

  print "1"

  if (currentPage > 2)
    print "..."
    print currentPage - 1

  if (currentPage != 1 and currentPage != totalPages)
    print currentPage

  if (currentPage < totalPages - 1)
    print currentPage + 1
    print "..."

  print totalPages

  if (currentPage < totalPages)
    print "Next"
endFunction

Fazit

Indem Sie die oben skizzierten Schritte befolgen, können Sie einen robusten Algorithmus zur Generierung dynamischer Paging-Links implementieren, der die Benutzerführung auf Ihrer Website erheblich verbessert. Die Implementierung eines solchen Algorithmus ermöglicht es Benutzern, nahtlos durch Inhalte zu navigieren, was zu einem viel angenehmeren Browsing-Erlebnis führt.

Wir hoffen, dass dieser Leitfaden Ihnen hilft, effektive Paging-Links in Ihrer Anwendung zu erstellen!