如何優化分頁演算法以增強使用者體驗？

智慧分頁演算法

問題

標準分頁會產生看似無窮無盡的頁面列表，但可以透過僅顯示特定內容來優化此過程與目前頁面相鄰的頁面。這可以防止頁面清單過長，使用戶更容易導覽分頁系統。

解決方案

實現這種「智慧」分頁策略的一種方法是修改現有分頁程式碼以截斷顯示頁面的列表，同時保持功能。修改後的演算法應包含以下步驟：

• 設定目前頁面每一側要顯示的相鄰頁面（adjacents）的數量。
• 計算第一個項目是使用 start = (page - 1) * limit 在目前頁面上顯示。
• 確定頁數是否足夠小（lastpage

• 如果頁數超過閾值，則分析當前頁面在分頁系統中的位置：

  • 如果當前頁接近開頭（第
  • 如果當前頁在中間（lastpage - (adjacents * 2) > page > (adjacents * 2)），則顯示前幾頁，一個省略號，當前頁周圍的幾頁，另一個省略號，然後是最後幾頁。
  • 如果目前頁面接近結尾（page > $lastpage - (2 (adjacents * 2))），則顯示前幾頁、省略號、一些目前頁面周圍的頁面，然後是最後幾頁。
• 根據修改後的演算法生成分頁連結。
• 顯示目前頁面所取得的資料。
• 根據需要重複分頁產生和資料顯示。

範例程式碼

以下是智慧分頁演算法的 PHP 實作範例：

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

以上是如何優化分頁演算法以增強使用者體驗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！