Wie optimiert man Paginierungsalgorithmen für eine verbesserte Benutzererfahrung?

Intelligenter Paginierungsalgorithmus

Problem

Standard-Paginierung erzeugt eine scheinbar endlose Liste von Seiten, aber es ist möglich, diesen Prozess zu optimieren, indem nur bestimmte Seiten angezeigt werden benachbarte Seiten zur aktuellen Seite. Dies verhindert übermäßig lange Seitenlisten und erleichtert Benutzern die Navigation im Paginierungssystem.

Lösung

Eine Methode zur Implementierung dieser „intelligenten“ Paginierungsstrategie besteht darin, den vorhandenen Paginierungscode so zu ändern, dass er abgeschnitten wird die Liste der angezeigten Seiten unter Beibehaltung der Funktionalität. Der modifizierte Algorithmus sollte die folgenden Schritte umfassen:

• Legen Sie die Anzahl der angrenzenden Seiten (Adjacents) fest, die auf jeder Seite der aktuellen Seite angezeigt werden sollen.
• Berechnen Sie das erste Element, das angezeigt werden soll wird auf der aktuellen Seite mit start = (page - 1) * limit angezeigt.
• Bestimmen Sie, ob die Anzahl der Seiten klein genug ist (letzte Seite < 7 (angrenzende * 2)), um alle Seiten nacheinander anzuzeigen. Wenn ja, durchlaufen Sie jede Seite und zeigen Sie sie an.

• Wenn die Anzahl der Seiten den Schwellenwert überschreitet, analysieren Sie die Position der aktuellen Seite innerhalb des Paginierungssystems:

  • Wenn die Die aktuelle Seite steht kurz vor dem Anfang (Seite < 1 (angrenzend * 2)). Zeigt die ersten paar Seiten an, gefolgt von einem Auslassungszeichen (...), um ausgelassene Seiten anzuzeigen, und dann die letzten paar Seiten.
  • Wenn sich die aktuelle Seite in der Mitte befindet (letzte Seite - (angrenzende * 2) > Seite > (angrenzende * 2)), zeigen Sie die ersten paar Seiten an, eine Auslassungspunkte, ein paar Seiten um die aktuelle Seite, eine weitere Auslassungspunkte, und dann die letzten paar Seiten.
  • Wenn sich die aktuelle Seite kurz vor dem Ende befindet (Seite > $lastpage - (2 (angrenzende * 2))), werden die ersten paar Seiten, Auslassungspunkte, einige angezeigt Seiten um die aktuelle Seite und dann die letzten paar Seiten.
• Paginierungslinks basierend auf dem geänderten Algorithmus generieren.
• Zeigt die für die aktuelle Seite abgerufenen Daten an.
• Wiederholen Sie die Paginierungsgenerierung und Datenanzeige für so viele Seiten wie erforderlich.

Beispielcode

Hier ist eine Beispiel-PHP-Implementierung des intelligenten Paginierungsalgorithmus:

<code class="php">// Set adjacent page count
$adjacents = 3;

// Initialize page number and items per page
$page = (int)$_GET["page"] ?? 1;
$limit = 5;

// Calculate start item
$start = ($page - 1) * $limit;

// Fetch data
$data = $db->query("SELECT * FROM mytable LIMIT $start, $limit")->fetchAll();

// Calculate total pages
$total_pages = count($data);

// Set up page variables
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages / $limit);
$lpm1 = $lastpage - 1;

// Generate pagination HTML
$pagination = "<nav aria-label='page navigation'><ul class='pagination'>";

// Previous button
$disabled = ($page === 1) ? "disabled" : "";
$pagination .= "<li class='page-item $disabled'><a class='page-link' href='?page=$prev'>« previous</a></li>";

// Pages
// Too few pages to hide any
if ($lastpage < 7 + ($adjacents * 2)) {
    for ($i = 1; $i <= $lastpage; $i++) {
        $active = ($i === $page) ? "active" : "";
        $pagination .= "<li class='page-item $active'><a class='page-link' href='?page=$i'>$i</a></li>";
    }
} elseif ($lastpage > 5 + ($adjacents * 2)) {
    // Close to beginning
    if ($page < 1 + ($adjacents * 2)) {
        for ($i = 1; $i < 4 + ($adjacents * 2); $i++) {
            $active = ($i === $page) ? "active" : "";
            $pagination .= "<li class='page-item $active'><a class='page-link' href='?page=$i'>$i</a></li>";
        }
        $pagination .= "<li class='page-item disabled'><span class='page-link'>...</span></li>";
        $pagination .= $last_pages;
    } elseif ($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2)) {
        // In middle
        $pagination .= $first_pages;
        $pagination .= "<li class='page-item disabled'><span class='page-link'>...</span></li>";
        for ($i = $page - $adjacents; $i <= $page + $adjacents; $i++) {
            $active = ($i === $page) ? "active" : "";
            $pagination .= "<li class='page-item $active'><a class='page-link' href='?page=$i'>$i</a></li>";
        }
        $pagination .= "<li class='page-item disabled'><span class='page-link'>...</span></li>";
        $pagination .= $last_pages;
    } else {
        // Close to end
        $pagination .= $first_pages;
        $pagination .= "<li class='page-item disabled'><span class='page-link'>...</span></li>";
        for ($i = $lastpage - (2 + ($adjacents * 2)); $i <= $lastpage; $i++) {
            $active = ($i === $page) ? "active" : "";
            $pagination .= "<li class='page-item $active'><a class='page-link' href='?page=$i'>$i</a></li>";
        }
    }
}

// Next button
$disabled = ($page === $lastpage) ? "disabled" : "";
$pagination .= "<li class='page-item $disabled'><a class='page-link' href='?page=$next'>next »</a></li>";

$pagination .= "</ul></nav>";

if ($lastpage <= 1) {
    $pagination = "";
}

echo $pagination;
foreach ($data as $row) {
    // Display your data
}
echo $pagination;</code>

Das obige ist der detaillierte Inhalt vonWie optimiert man Paginierungsalgorithmen für eine verbesserte Benutzererfahrung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!