ReactJS实现固定4列2行数据展示并添加分页导航

要实现仅显示4列2行（共8条）数据并添加导航查看其余内容，核心是分页逻辑结合固定布局渲染，分后端处理和前端实现两部分：

一、后端分页处理（高效方案） #

从数据库取数据时直接做分页，避免一次性加载全部数据：

1. 确定每页数据量：4列×2行 = 8条/页
2. 数据库查询时使用分页语法：
   • MySQL：SELECT * FROM 表名 LIMIT (页码-1)*8, 8;
   • PostgreSQL：SELECT * FROM 表名 LIMIT 8 OFFSET (页码-1)*8;
3. 同时查询总数据条数：SELECT COUNT(*) FROM 表名;，用来计算总页数（总页数=ceil(总条数/8)）

二、前端渲染与导航实现 #

1. 固定行列布局 #

用CSS Grid实现4列2行的展示容器：

.data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.data-item {
  padding: 10px;
  border: 1px solid #eee;
}

渲染时把当前页的8条数据循环放入.data-grid即可。

2. 分页导航实现 #

添加导航按钮，监听点击事件切换页码，重新请求对应页的数据：

<div class="pagination">
  <button id="prevBtn" disabled>上一页</button>
  <span id="pageInfo">第 1 页 / 共 X 页</span>
  <button id="nextBtn">下一页</button>
</div>

let currentPage = 1;
const pageSize = 8;
let totalPages = 0;

// 获取总页数后初始化
function initPagination(totalCount) {
  totalPages = Math.ceil(totalCount / pageSize);
  document.getElementById('pageInfo').textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
  updateBtnStatus();
}

// 更新按钮禁用状态
function updateBtnStatus() {
  document.getElementById('prevBtn').disabled = currentPage === 1;
  document.getElementById('nextBtn').disabled = currentPage === totalPages;
}

// 上一页点击事件
document.getElementById('prevBtn').addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    fetchData(currentPage);
  }
});

// 下一页点击事件
document.getElementById('nextBtn').addEventListener('click', () => {
  if (currentPage < totalPages) {
    currentPage++;
    fetchData(currentPage);
  }
});

// 请求对应页数据并渲染
function fetchData(page) {
  // 替换成你的后端接口请求
  fetch(`/api/data?page=${page}&size=${pageSize}`)
    .then(res => res.json())
    .then(data => {
      renderData(data.list);
      document.getElementById('pageInfo').textContent = `第 ${page} 页 / 共 ${totalPages} 页`;
      updateBtnStatus();
    });
}

// 渲染数据到网格
function renderData(list) {
  const grid = document.querySelector('.data-grid');
  grid.innerHTML = '';
  list.forEach(item => {
    const div = document.createElement('div');
    div.className = 'data-item';
    div.textContent = item.content; // 替换成你的数据字段
    grid.appendChild(div);
  });
}

三、前端分页（适合小数据量） #

如果数据量很小，也可以一次性加载全部数据，在前端做分页：

1. 把所有数据存入数组
2. 根据当前页码截取对应片段：const currentPageData = allData.slice((currentPage-1)*8, currentPage*8);
3. 渲染截取后的数组，导航逻辑和上面一致

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