ユーザーエクスペリエンスを向上させるためにページネーションアルゴリズムを最適化するにはどうすればよいですか?

スマート ページネーション アルゴリズム

問題

標準のページネーションでは一見無限のページ リストが生成されますが、特定のページのみを表示することでこのプロセスを最適化することが可能です現在のページに隣接するページ。これにより、過度に長いページ リストが回避され、ユーザーがページネーション システムを簡単に操作できるようになります。

解決策

この「スマートな」ページネーション戦略を実装する 1 つの方法は、既存のページネーション コードを変更して切り詰めることです。機能を維持しながら、表示されるページのリストを表示します。変更されたアルゴリズムには、次の手順が組み込まれている必要があります。

• 現在のページの両側に表示される隣接ページ (隣接) の数を設定します。
• 表示される最初の項目を計算します。 start = (page - 1) * limit.
• を使用して現在のページに表示されます。
• すべてのページを連続して表示するのに十分なページ数 (lastpage
  ページ数がしきい値を超えた場合は、ページネーション システム内の現在のページの位置を分析します。
  • 現在のページが先頭に近い場合 (ページ
  • 現在のページが中央にある場合 (lastpage - (隣接数 * 2) > ページ > (隣接数 * 2))、最初の数ページ、省略記号、現在のページの周囲の数ページ、別の省略記号を表示します。
  現在のページが終わりに近い場合 (ページ > $lastpage - (2 (隣接 * 2)))、最初の数ページ、省略記号、いくつかのページを表示します。現在のページの前後のページ、その後最後の数ページ。
• 変更されたアルゴリズムに基づいてページ分割リンクを生成します。
• 現在のページに対して取得されたデータを表示します。

必要なページ数分のページネーションの生成とデータ表示を繰り返します。

サンプル コード

<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 実装の例を次に示します。

以上がユーザーエクスペリエンスを向上させるためにページネーションアルゴリズムを最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。