Comment optimiser les algorithmes de pagination pour une expérience utilisateur améliorée ?

Algorithme de pagination intelligente

Problème

La pagination standard génère une liste apparemment infinie de pages, mais il est possible d'optimiser ce processus en affichant uniquement des pages spécifiques pages adjacentes à la page actuelle. Cela évite des listes de pages trop longues, ce qui facilite la navigation des utilisateurs dans le système de pagination.

Solution

Une méthode pour mettre en œuvre cette stratégie de pagination « intelligente » consiste à modifier le code de pagination existant pour le tronquer. la liste des pages affichées tout en conservant les fonctionnalités. L'algorithme modifié doit intégrer les étapes suivantes :

• Définir le nombre de pages adjacentes (adjacentes) à afficher de chaque côté de la page actuelle.
• Calculer le premier élément à afficher affiché sur la page actuelle en utilisant start = (page - 1) * limit.
• Déterminez si le nombre de pages est suffisamment petit (dernière page < 7 (adjacentes * 2)) pour afficher toutes les pages consécutivement. Si tel est le cas, parcourez chaque page et affichez-la.

• Si le nombre de pages dépasse le seuil, analysez la position de la page actuelle dans le système de pagination :

  • Si le la page actuelle est proche du début (page < 1 (adjacents * 2)), affiche les premières pages, suivies de points de suspension (...) pour indiquer les pages omises, puis les dernières pages.
  • Si la page courante est au milieu (dernière page - (adjacents * 2) > page > (adjacents * 2)), afficher les premières pages, des points de suspension, quelques pages autour de la page courante, des points de suspension supplémentaires, puis les dernières pages.
  • Si la page actuelle est proche de la fin (page > $lastpage - (2 (adjacents * 2))), affichez les premières pages, des points de suspension, quelques pages autour de la page actuelle, puis les dernières pages.
• Générer des liens de pagination basés sur l'algorithme modifié.
• Afficher les données récupérées pour la page actuelle.
• Répétez la génération de pagination et l'affichage des données pour autant de pages que nécessaire.

Exemple de code

Voici un exemple d'implémentation PHP de l'algorithme de pagination intelligente :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!