Java 實現 MySQL 分頁查詢：從後端到前端的完整方案

後端分頁核心 SQL

-- MySQL 8.0+
SELECT * FROM t_order
ORDER BY create_time DESC
LIMIT ? OFFSET ?;   -- ?1=pageSize, ?2=(pageNum-1)*pageSize

後端分層實現

1. DAO：List<Order> selectPage(int offset, int limit) + int countTotal()。
2. Service：計算 totalPages = (total + size - 1) / size，封裝 PageResult<T> {list, total, pageNum, pageSize, totalPages}。
3. Controller：接收 pageNum, pageSize 參數，校驗默認值，返回 JSON。

前端交互（原生 JS 示例）

async function load(page) {
  const res = await fetch(`/api/orders?page=${page}&size=10`);
  const {list, totalPages, pageNum} = await res.json();
  renderTable(list);
  renderPager(pageNum, totalPages);
}
function renderPager(cur, total) {
  let html = '';
  if (cur > 1) html += `上一頁`;
  for (let i = 1; i <= total; i++) {
    html += `${i}`;
  }
  if (cur < total) html += `下一頁`;
  document.getElementById('pager').innerHTML = html;
}

進階優化

• 大偏移量性能差 → 改用 WHERE id > lastId ORDER BY id LIMIT size（游標分頁）。
• 引入 MyBatis-Plus / PageHelper 自動攔截分頁。
• 前端用成熟組件（Element UI Pagination, Ant Design Pagination）減少造輪子。

掌握「SQL LIMIT + Service 封裝 PageResult + 前端渲染分頁條」三步走，分頁功能快速落地且易維護。