如何用JavaScript实现分页的1/4格式显示及按钮状态控制

以下是修复后的完整代码，实现了你需要的「当前页/总页数」显示、分页切换及边界按钮禁用功能：

HTML 结构 #

<div class="pagination-container">
  <button id="prevBtn" class="pagination-btn">上一页</button>
  <span id="pageInfo" class="page-info">1/4</span>
  <button id="nextBtn" class="pagination-btn">下一页</button>
</div>

CSS 样式 #

.pagination-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}

.pagination-btn {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

.pagination-btn:disabled {
  cursor: not-allowed;
  background-color: #f5f5f5;
  color: #999;
  border-color: #eee;
}

.page-info {
  font-size: 1rem;
  color: #333;
}

JavaScript 逻辑 #

// 初始化分页状态
let currentPage = 1;
const totalPages = 4; // 可根据实际数据动态计算，比如 totalPages = Math.ceil(总数据条数/每页显示条数)

// 获取DOM元素
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const pageInfo = document.getElementById('pageInfo');

// 更新分页UI的核心函数
function updatePaginationUI() {
  // 更新页码显示文本
  pageInfo.textContent = `${currentPage}/${totalPages}`;
  // 控制按钮禁用状态
  prevBtn.disabled = currentPage === 1;
  nextBtn.disabled = currentPage === totalPages;
}

// 绑定上一页点击事件
prevBtn.addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    updatePaginationUI();
    // 此处可添加切换页面后的业务逻辑，比如加载对应页的数据
    console.log(`切换到第${currentPage}页`);
  }
});

// 绑定下一页点击事件
nextBtn.addEventListener('click', () => {
  if (currentPage < totalPages) {
    currentPage++;
    updatePaginationUI();
    // 此处可添加切换页面后的业务逻辑，比如加载对应页的数据
    console.log(`切换到第${currentPage}页`);
  }
});

// 页面初始化时设置初始状态
updatePaginationUI();

关键实现说明 #

• 用currentPage和totalPages维护分页核心状态，totalPages支持根据实际数据动态生成
• 统一通过updatePaginationUI函数处理UI更新，避免重复代码
• 点击按钮时先判断当前页是否在有效范围，再更新状态并同步UI
• 利用原生disabled属性控制按钮禁用状态，配合CSS实现禁用样式

内容的提问来源于stack exchange，提问作者Shoeb Siddique