服务器端处理表格分页：选择DataTables还是其他工具？

我之前也碰到过DataTables加载大数据量卡顿的问题，服务器端处理确实是解决这个问题的最优解，结合你的需求整理了完整的实现要点：

前端核心配置 #

这是开启服务器端处理的关键JS代码，直接初始化表格时开启对应选项即可：

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

• processing: 开启后会在数据加载时显示加载动画，避免用户以为页面无响应
• serverSide: 这个开关是核心，开启后所有分页、排序、筛选逻辑都会交给后端处理，前端只负责渲染结果
• ajax: 指定后端处理请求的接口路径，根据自己的项目结构调整即可

后端返回格式规范 #

DataTables对服务器返回的JSON格式有严格要求，必须包含以下必填字段：

{
    "draw": 2,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        [ "Charde", "Marshall", "Regional Director", ... ]
    ]
}

各字段作用说明：

• draw: 对应前端请求里的draw参数，原样返回即可，用来匹配请求和响应的对应关系
• recordsTotal: 数据库中未经过筛选的总记录数
• recordsFiltered: 经过筛选后的记录数，如果没有做筛选操作，这个值和recordsTotal保持一致
• data: 当前页需要展示的数据集，是二维数组结构，每个子数组对应表格的一行数据

额外注意点 #

• 后端需要解析前端发送的分页（start、length）、排序（order）、全局筛选（search）等参数，根据这些参数执行对应的数据库查询
• 如果前后端不在同一域名下，要提前处理好跨域请求的问题
• 可以通过ajax选项的自定义配置，添加业务所需的额外请求参数或请求头

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