怎么使用HTML在线分页组件_HTML在线分页组件使用方法与数据分页方案

<div class="pagination">
  <a href="?page=1">首页</a>
  <a href="?page=2">2</a>
  <a href="?page=3">3</a>
  <strong><a href="?page=4" class="active">4</a></strong>
  <a href="?page=5">5</a>
  <a href="?page=6">下一页</a>
</div>

.pagination a {
  padding: 8px 12px;
  margin: 0 4px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #007bff;
}
.pagination a.active {
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;
}

function renderPage(data, page, pageSize) {
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  const paginatedData = data.slice(start, end);
  // 将 paginatedData 渲染到表格或列表中
}
// 调用：renderPage(userList, 2, 10); 显示第2页，每页10条

SELECT * FROM articles 
LIMIT 10 OFFSET 20; -- 第3页，每页10条

{
  "data": [...],
  "total": 150,
  "page": 3,
  "size": 10
}

$('#pagination').pagination({
  total_pages: 100,
  current_page: 1,
  callback: function(page) {
    loadData(page); // 加载对应页数据
  }
});