具有上一页、下一页和页码

如果需要实现具有上一页、下一页和页码的分页组件，可以使用 JavaScript 来动态生成分页项并实现分页功能。下面是一个简单的示例代码：

HTML 代码：

<div id="pagination"></div>

JavaScript 代码：

var currentPage = 1;
var itemsPerPage = 10;
var totalItems = 100;

var totalPages = Math.ceil(totalItems / itemsPerPage);

var pagination = document.getElementById("pagination");

// 上一页按钮
var prevBtn = document.createElement("button");
prevBtn.innerHTML = "上一页";
prevBtn.disabled = true;
prevBtn.addEventListener("click", function() {
  currentPage--;
  updatePagination();
});

pagination.appendChild(prevBtn);

// 页码按钮
for (var i = 1; i <= totalPages; i++) {
  var pageBtn = document.createElement("button");
  pageBtn.innerHTML = i;
  pageBtn.addEventListener("click", function() {
    currentPage = parseInt(this.innerHTML);
    updatePagination();
  });
  pagination.appendChild(pageBtn);
}

// 下一页按钮
var nextBtn = document.createElement("button");
nextBtn.innerHTML = "下一页";
nextBtn.addEventListener("click", function() {
  currentPage++;
  updatePagination();
});

pagination.appendChild(nextBtn);

// 更新分页状态
function updatePagination() {
  // 更新页码按钮状态
  var pageBtns = pagination.getElementsByTagName("button");
  for (var i = 1; i <= totalPages; i++) {
    pageBtns[i].disabled = false;
  }
  pageBtns[currentPage].disabled = true;

  // 更新上一页和下一页按钮状态
  prevBtn.disabled = (currentPage == 1);
  nextBtn.disabled = (currentPage == totalPages);
  
  // 更新分页内容
  var startIndex = (currentPage - 1) * itemsPerPage;
  var endIndex = Math.min(startIndex + itemsPerPage, totalItems);
  // TODO: 根据起始索引和结束索引获取数据并渲染到页面上
}

这段代码创建了一个具有上一页、下一页和页码的分页组件，并使用事件监听器来实现分页功能。您可以根据需要更改样式和分页参数。需要注意的是，这段代码只实现了分页功能，您需要根据具体情况来获取数据并渲染到页面上。