ホームページ > バックエンド開発 > PHPチュートリアル > ユーザーエクスペリエンスを向上させるためにページネーションアルゴリズムを最適化するにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-10-17 16:14:02
オリジナル
924 人が閲覧しました

How to Optimize Pagination Algorithms for Enhanced User Experience?

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

問題

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

解決策

この「スマートな」ページネーション戦略を実装する 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 サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート