分页组件优化：多页数场景下分页按钮冗余的解决方案咨询

固定宽度+overflow滑动实现可行性 #

是可以的，改造成本极低，给你的分页容器#pagination-filtered添加如下CSS样式即可生效：

#pagination-filtered {
  max-width: 600px; /* 可根据你的页面布局调整为合适的固定宽度 */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  /* 可选：美化滚动条，提升桌面端可感知度 */
  scrollbar-width: thin;
}
.pagination_buttons {
  display: inline-block !important; /* 覆盖JS动态添加的display逻辑，所有按钮都展示用于滑动 */
  margin: 0 4px;
}

这个方案的优缺点：

• 优点：不需要调整现有JS逻辑，移动端触摸滑动交互自然
• 缺点：桌面端用户容易忽略可滑动特性，默认隐藏的滚动条会导致用户看不到后续页码，交互辨识度低

更优的实现方案 #

方案1：带省略号的截断分页（通用场景推荐） #

你现有的前后各4页展示逻辑已经有基础了，补充中间省略号占位即可，用户认知成本极低，适配绝大多数场景：

1. 总页数≤9时，所有页码全部展示，不需要截断
2. 总页数>9时，根据当前选中页码调整展示规则：
   • 当前页属于前4页：展示1-5、省略号、最后4页
   • 当前页属于最后4页：展示前4页、省略号、最后5页
   • 当前页属于中间区间：展示前2页、省略号、当前页前后各2页、省略号、最后2页
     你可以修改现有JS逻辑实现，参考代码片段：

var div = document.getElementById('pagination-filtered');
div.innerHTML = ''; // 先清空原有内容
var filterLength = Math.ceil(novostiObjFiltered.length / numPerPage);
var currentPage = 1; // 这里替换成你实际存储当前页码的变量
// 生成页码逻辑
for (var i = 1; i <= filterLength; i++) {
  var showBtn = false;
  if (filterLength <=9) {
    showBtn = true;
  } else {
    if (i < 5 || i > filterLength -4) showBtn = true;
    if (i >= currentPage -2 && i <= currentPage +2) showBtn = true;
  }
  // 插入省略号占位
  if (!showBtn) {
    if (i == 5 || i == filterLength -4) {
      var ellipsis = document.createElement('span');
      ellipsis.innerText = '...';
      ellipsis.style.padding = '0 8px';
      div.appendChild(ellipsis);
    }
    continue;
  }
  var btn = document.createElement('button');
  btn.innerText = String(i);
  btn.type = 'button';
  btn.value = i;
  btn.id = 'button' + i;
  btn.className = 'pagination_buttons';
  if (i == currentPage) btn.classList.add('active'); // 可自定义active类高亮当前页
  div.appendChild(btn);
}

方案2：补充快捷跳转控件 #

如果总页数经常超过30，可以在分页栏末尾加页码输入框+跳转按钮，或者增加「上10页」「下10页」的快捷操作按钮，适合高频翻页的使用场景。

方案3：下拉选择器替代分页按钮 #

移动端小屏幕场景下，总页数超过15时直接用下拉选择器展示所有页码，占用空间极小，操作效率更高。

内容的提问来源于stack exchange，提问作者Noname Taco