js grid分页能多表格

JavaScript中的Grid分页通常指的是在一个网格布局中对数据进行分页显示，以便用户能够浏览大量的数据而不必一次性加载所有内容。当涉及到多个表格时，可以通过一些策略来实现分页功能。

基础概念

Grid布局：CSS Grid布局是一种二维布局系统，允许你在行和列中排列元素。
分页：分页是将数据分成多个部分，每次只显示一部分，用户可以通过翻页来查看其他部分的数据。

优势

性能优化：通过分页，可以减少一次性加载的数据量，提高页面加载速度。
用户体验：用户可以更容易地浏览和查找信息，而不必滚动长长的列表。
资源管理：对于服务器端来说，分页可以减少每次请求处理的数据量，降低服务器负载。

类型

客户端分页：所有数据一次性加载到客户端，然后通过JavaScript进行分页显示。
服务器端分页：每次只从服务器加载当前页的数据，适用于大数据集。

应用场景

数据密集型应用：如电商网站的商品列表、论坛的帖子列表等。
报表系统：需要展示大量数据的统计报表。
管理后台：管理员查看用户列表、订单列表等。

实现多表格分页的方法

以下是一个简单的示例，展示如何使用JavaScript和CSS Grid实现两个表格的分页功能。

HTML结构

<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>

CSS样式

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

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

JavaScript代码

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();