如何优化分页算法以增强用户体验?

Mary-Kate Olsen
发布: 2024-10-17 16:14:02
原创
908 人浏览过

How to Optimize Pagination Algorithms for Enhanced User Experience?

智能分页算法

问题

标准分页会生成看似无穷无尽的页面列表,但可以通过仅显示特定内容来优化此过程与当前页面相邻的页面。这可以防止页面列表过长,使用户更容易导航分页系统。

解决方案

实现这种“智能”分页策略的一种方法是修改现有分页代码以截断显示页面的列表,同时保持功能。修改后的算法应包含以下步骤:

  • 设置当前页面每一侧要显示的相邻页面(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中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板