HTML项目实战如何开发带有分页导航与条数切换的列表组件

需开发JavaScript驱动的语义化列表组件，支持分页导航与条数切换联动：用<nav>包裹页码<ul>，当前页标aria-current，禁用按钮设aria-disabled；<select>切换每页条数并自动调整当前页；页码智能截断显示，最多5个数字加省略号；点击触发pushState更新URL确保状态持久。

开发一个带分页导航和条数切换的列表组件，核心是把数据展示、页码控制、每页数量变更三者联动起来。不能只写静态HTML，得靠JavaScript驱动状态变化，并同步更新UI和URL。

结构用语义化标签搭好骨架

用<nav aria-label="分页导航">包裹整个分页区域，内部用<ul>组织页码项，当前页加aria-current="page"，禁用按钮用aria-disabled="true"。条数切换用<select>，选项值对应每页显示条数（如10、20、50），并设默认选中项。列表内容区用<div id="list-container">预留动态渲染位置。

页码逻辑要智能截断，不堆数字

总页数由Math.ceil(totalItems / itemsPerPage)算出。页码数组不能全渲染，得用函数控制可见范围：比如最多显示5个数字页码，当前页在中间，首尾固定为1和totalPages，中间超出部分用省略号占位。当当前页靠近开头（如第2页）或结尾（如倒数第2页）时，要自动拉齐显示区间，避免出现“1 … 3 4 5 … 100”这种无效结构。

1. 当前页为1 → 显示 1 2 3 … 总页数
2. 当前页为总页数 → 显示 1 … 倒数3 倒数2 总页数
3. 中间页 → 显示 左边界 … 当前页-1 当前页 当前页+1 … 右边界

条数切换要重算页码并跳转到合理页

用户改每页条数时，新总页数可能变小。比如原100条、每页10条→共10页；切到每页50条→只剩2页。此时若还在第7页，就得自动跳回最后一页（即第2页），否则会空页。所以select的change事件里，要先更新itemsPerPage，再重算totalPages，然后把currentPage设为Math.min(currentPage, totalPages)，再重新渲染。

交互与可访问性不能妥协

所有页码项用<button type="button">，不是<a>——避免默认跳转、支持空格/回车触发、能正确聚焦。上一页/下一页按钮在不可用时加disabled属性和aria-disabled="true"，而不是仅靠CSS灰掉。点击后调用history.pushState()更新URL（如/list?page=3&size=20），保证刷新不丢状态，也利于SEO和分享。