js grid分页能多表格

<div class="grid-container">
  <div id="table1" class="table"></div>
  <div id="table2" class="table"></div>
</div>
<button onclick="prevPage()">Previous</button>
<button onclick="nextPage()">Next</button>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.table {
  border: 1px solid #ccc;
  padding: 10px;
}

const data1 = Array.from({ length: 100 }, (_, i) => ({ id: i, name: `Item ${i}` }));
const data2 = Array.from({ length: 100 }, (_, i) => ({ id: i, name: `Item ${i}` }));

let currentPage = 1;
const itemsPerPage = 10;

function renderTable(tableId, data) {
  const tableElement = document.getElementById(tableId);
  const start = (currentPage - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const pageData = data.slice(start, end);

  tableElement.innerHTML = `
    <table>
      <thead><tr><th>ID</th><th>Name</th></tr></thead>
      <tbody>${pageData.map(item => `<tr><td>${item.id}</td><td>${item.name}</td></tr>`).join('')}</tbody>
    </table>
  `;
}

function updateTables() {
  renderTable('table1', data1);
  renderTable('table2', data2);
}

function nextPage() {
  if ((currentPage * itemsPerPage) < data1.length) {
    currentPage++;
    updateTables();
  }
}

function prevPage() {
  if (currentPage > 1) {
    currentPage--;
    updateTables();
  }
}

// Initial render
updateTables();