How to Optimize Pagination Algorithms for Enhanced User Experience?

Smart Pagination Algorithm

Problem

Standard pagination generates a seemingly endless list of pages, but it is possible to optimize this process by displaying only specific adjacent pages to the current page. This prevents excessively long page lists, making it easier for users to navigate the pagination system.

Solution

One method for implementing this "smart" pagination strategy is to modify the existing pagination code to truncate the list of displayed pages while maintaining functionality. The modified algorithm should incorporate the following steps:

• Set the number of adjacent pages (adjacents) to be shown on each side of the current page.
• Calculate the first item to be displayed on the current page using start = (page - 1) * limit.
• Determine if the number of pages is small enough (lastpage < 7 (adjacents * 2)) to display all pages consecutively. If so, loop through each page and display it.

• If the number of pages exceeds the threshold, analyze the current page's position within the pagination system:

  • If the current page is close to the beginning (page < 1 (adjacents * 2)), display the first few pages, followed by an ellipsis (...) to indicate omitted pages, and then the last few pages.
  • If the current page is in the middle (lastpage - (adjacents * 2) > page > (adjacents * 2)), display the first few pages, an ellipsis, a few pages around the current page, another ellipsis, and then the last few pages.
  • If the current page is close to the end (page > $lastpage - (2 (adjacents * 2))), display the first few pages, an ellipsis, a few pages around the current page, and then the last few pages.
• Generate pagination links based on the modified algorithm.
• Display the data fetched for the current page.
• Repeat the pagination generation and data display for as many pages as required.

Example Code

Here is an example PHP implementation of the smart pagination algorithm:

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

The above is the detailed content of How to Optimize Pagination Algorithms for Enhanced User Experience?. For more information, please follow other related articles on the PHP Chinese website!