如何在简单的HTML页面中使用Javascript实现分页

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

var data = [...]; // 需要进行分页的数据
var pageSize = 10; // 每页显示的数据数量
var totalPages = Math.ceil(data.length / pageSize); // 总页数

function displayData(page) {
  var startIndex = (page - 1) * pageSize; // 当前页数据的起始索引
  var endIndex = startIndex + pageSize; // 当前页数据的结束索引
  var currentPageData = data.slice(startIndex, endIndex); // 当前页的数据

  // 在页面中显示当前页的数据
  // 例如，可以将数据插入到一个table中
  var table = document.getElementById("table");
  table.innerHTML = ""; // 清空表格内容
  currentPageData.forEach(function(item) {
    var row = table.insertRow();
    var cell = row.insertCell();
    cell.innerHTML = item;
  });
}

function createPagination() {
  var pagination = document.getElementById("pagination");
  pagination.innerHTML = ""; // 清空分页导航栏内容

  // 创建页码按钮并绑定点击事件
  for (var i = 1; i <= totalPages; i++) {
    var button = document.createElement("button");
    button.innerHTML = i;
    button.addEventListener("click", function() {
      var page = parseInt(this.innerHTML);
      displayData(page);
    });
    pagination.appendChild(button);
  }
}

window.onload = function() {
  createPagination();
  displayData(1);
};