향상된 사용자 경험을 위해 페이지 매김 알고리즘을 최적화하는 방법은 무엇입니까?

스마트 페이지 매김 알고리즘

문제

표준 페이지 매김은 끝이 없어 보이는 페이지 목록을 생성하지만 특정 페이지만 표시하여 이 프로세스를 최적화할 수 있습니다. 현재 페이지의 인접한 페이지. 이렇게 하면 지나치게 긴 페이지 목록을 방지하여 사용자가 페이지 매김 시스템을 더 쉽게 탐색할 수 있습니다.

해결책

이 "스마트" 페이지 매김 전략을 구현하는 한 가지 방법은 기존 페이지 매김 코드를 수정하여 잘라내는 것입니다. 기능을 유지하면서 표시된 페이지 목록. 수정된 알고리즘에는 다음 단계가 포함되어야 합니다.

• 현재 페이지의 각 측면에 표시할 인접 페이지(인접) 수를 설정합니다.
• 표시할 첫 번째 항목을 계산합니다. 시작 = (페이지 - 1) * 제한을 사용하여 현재 페이지에 표시됩니다.
• 모든 페이지를 연속적으로 표시할 수 있을 만큼 페이지 수가 충분히 작은지(마지막 페이지 < 7(인접 * 2)) 확인합니다. 그렇다면 각 페이지를 반복하여 표시하십시오.

• 페이지 수가 임계값을 초과하는 경우 페이지 매김 시스템 내에서 현재 페이지의 위치를 ​​분석하십시오.

  • 현재 페이지가 시작 부분(페이지 < 1(인접 * 2))에 가까우면 처음 몇 페이지를 표시한 다음 생략된 페이지를 나타내는 줄임표(...), 마지막 몇 페이지를 표시합니다.
  • 현재 페이지가 중간(마지막 페이지 - (인접 * 2) > 페이지 > (인접 * 2))에 있는 경우 처음 몇 페이지, 줄임표, 현재 페이지 주변 몇 페이지, 또 다른 줄임표, 그리고 마지막 몇 페이지.
  • 현재 페이지가 끝에 가까울 경우(페이지 > $lastpage - (2 (인접 * 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!