Bootstrap DataTable加载40万行过慢，如何实现AJAX分页加载？

当数据量达到40万条时，一次性渲染整个表格会导致页面加载超时，改用DataTables的**服务器端处理（Server-side Processing）**是最优解——核心思路是每次只加载当前页的数据，分页、排序、搜索逻辑全部在后端完成。

1. 调整HTML结构 #

移除Thymeleaf的循环渲染逻辑，让tbody保持空状态，后续数据将通过AJAX动态填充：

<div id="table_issue" style="display:none;">
<div class="row">
    <div>
        <div>
            <table class="table table-hover table-bordered" id="dtBasicExample2">
                <thead class="table-active">
                <tr>
                    <th>DB ID</th>
                    <th>Jira ID</th>
                    <th>Status Code</th>
                    <th>Time</th>
                </tr>
                </thead>
                <tbody>
                <!-- 留空，由AJAX动态填充数据 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

2. 后端实现AJAX接口 #

编写一个接口（例如/api/issues），接收DataTables自动传递的请求参数，处理分页、排序、搜索后返回指定格式的JSON数据。

接口需接收的核心参数： #

• start: 当前页数据的起始索引
• length: 每页显示的记录条数
• order[0][column]: 排序的列索引
• order[0][dir]: 排序方向（asc升序/desc降序）
• search[value]: 全局搜索关键词（可选）

接口返回的JSON格式要求： #

{
  "draw": 1, // 需与请求中的draw参数一致，防止重复请求
  "recordsTotal": 400000, // 总记录数
  "recordsFiltered": 400000, // 过滤后的记录数（无搜索时与recordsTotal相等）
  "data": [
    {"id": 1, "uiString": "JIRA-123", "statusDesc": "已解决", "formattedTime": "2024-05-20 10:00:00"},
    // 当前页的其他数据...
  ]
}

后端逻辑要点： #

• 用数据库分页查询（如MySQL的LIMIT start, length）获取当前页数据
• 根据排序参数对指定字段排序，需给排序字段添加数据库索引优化性能
• 若支持搜索，对指定字段做模糊查询，可配合全文索引提升效率

3. 修改前端JS配置 #

启用DataTables的服务器端模式，配置AJAX地址和字段映射：

$('#dtBasicExample2').DataTable({
  serverSide: true, // 开启服务器端处理
  ajax: '/api/issues', // 后端接口地址
  columns: [
    { data: 'id' }, // 对应后端返回data中的id字段
    { data: 'uiString' }, // 对应后端返回的uiString字段
    { data: 'statusDesc' }, // 对应后端返回的statusDesc字段
    { data: 'formattedTime' } // 对应后端返回的formattedTime字段
  ],
  lengthMenu: [10, 25, 50, 100], // 可选的每页条数选项
  pageLength: 10, // 默认每页显示10条
  ordering: true, // 允许列排序
  searching: true // 允许全局搜索（可根据需求关闭）
});
$('.dataTables_length').addClass('bs-select');

关键注意事项 #

• 务必给排序、搜索涉及的数据库字段添加索引，避免全表扫描导致查询超时
• 确保后端返回的字段名与JS中columns.data配置的名称完全匹配
• 若有复杂查询需求，可在后端添加缓存优化性能

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