使用PHP与jQuery实现数字序列分页拆分及无刷新加载技术咨询

1. 调整PHP输出逻辑 #

不要全量渲染所有button，只输出容器和总数量参数，把渲染逻辑交给前端JS控制：

<!-- 数字按钮渲染容器 -->
<div id="slot-btn-container"></div>
<!-- 分页导航容器 -->
<div id="pagination-bar"></div>
<script>
// 注入总数量给前端JS调用
window.totalSlots = <?php echo (int)$post['number_of_slots']; ?>;
</script>

2. jQuery实现无刷新分页逻辑 #

引入jQuery后添加如下代码即可实现需求：

$(function() {
  // 基础配置
  const perPage = 100 // 每页展示100个数字
  const navShowCount = 7 // 分页导航最多显示7个页码
  const totalPage = Math.ceil(totalSlots / perPage)
  let currentPage = 1

  // 渲染当前页的数字按钮
  function renderSlotBtns(page) {
    const start = (page - 1) * perPage + 1
    const end = Math.min(page * perPage, totalSlots)
    let html = ''
    for (let i = start; i <= end; i++) {
      html += `<button><span>${i}</span></button>`
    }
    $('#slot-btn-container').html(html)
  }

  // 渲染分页导航
  function renderPagination() {
    let html = `<button class="nav-prev">&lt;</button>`
    // 计算要显示的页码范围
    let startPage = Math.max(1, currentPage - Math.floor(navShowCount / 2))
    let endPage = Math.min(totalPage, startPage + navShowCount - 1)
    if (endPage - startPage < navShowCount - 1) {
      startPage = Math.max(1, endPage - navShowCount + 1)
    }
    // 渲染页码
    for (let i = startPage; i <= endPage; i++) {
      const activeClass = i === currentPage ? 'active' : ''
      html += `<button class="nav-page ${activeClass}">${i}</button>`
    }
    html += `<button class="nav-next">&gt;</button>`
    $('#pagination-bar').html(html)
  }

  // 绑定分页点击事件
  $('#pagination-bar').on('click', '.nav-page', function() {
    currentPage = parseInt($(this).text())
    renderSlotBtns(currentPage)
    renderPagination()
  }).on('click', '.nav-prev', function() {
    if (currentPage > 1) {
      currentPage--
      renderSlotBtns(currentPage)
      renderPagination()
    }
  }).on('click', '.nav-next', function() {
    if (currentPage < totalPage) {
      currentPage++
      renderSlotBtns(currentPage)
      renderPagination()
    }
  })

  // 初始化渲染第一页
  renderSlotBtns(currentPage)
  renderPagination()
})

3. 可选样式补充 #

你可以添加简单的CSS控制导航样式，实现你要的逗号分隔效果：

#pagination-bar button {
  margin: 0 2px;
  border: none;
  background: none;
  cursor: pointer;
}
#pagination-bar button.nav-page:not(:last-of-type)::after {
  content: ',';
  margin-left: 2px;
}
#pagination-bar button.active {
  font-weight: bold;
  color: #f00;
}

内容的提问来源于stack exchange，提问作者Colorado Akpan