JQuery DataTable第一页后分页长度设置不生效问题求助

算力阿峰

2026-4-30

问题分析与解决方案

你的问题不是单纯由数据量过大直接导致的，核心根源在于你当前使用的是DataTables的客户端分页模式，但后端一次性返回了所有数据。当数据量较大时，前端需要承载所有数据的渲染、分页计算压力，不仅容易出现页面卡顿，还可能导致DataTables内部状态混乱，进而出现你遇到的“第一页正常、后续页面分页长度失效”的问题。

为什么会出现这种现象？

在客户端分页模式下，DataTables会先加载全量数据到前端，再在本地完成分页渲染。第一页能正常显示50条是因为初始渲染时逻辑未受大量数据干扰，但切换页面时，前端需要重新计算剩余数据的分页规则，若数据量过大，很容易触发DataTables老版本（你用的1.10.21）的内部逻辑bug，导致pageLength设置被忽略。

彻底解决方法：启用服务端分页

要从根本上解决问题，建议切换到服务端分页模式，让后端根据DataTables传递的分页参数返回对应页的数据，既减轻前端压力，也能保证分页逻辑稳定可靠。

步骤1：修改前端DataTables配置

开启serverSide: true，并调整AJAX参数以传递分页、排序信息，同时适配后端的返回格式：

dataTable = $("#sampleTable").DataTable({ 
    "ajax": { 
        "url": '....', 
        "contentType": "application/json", 
        "type": "POST", 
        // 传递DataTables的分页、排序、搜索参数给后端
        "data": function(d) {
            return JSON.stringify(d);
        },
        // 指定后端返回数据中，实际列表数据的字段路径
        "dataSrc": "data" 
    }, 
    "columns": [ 
        {"data": "name", "title": "Name"}, 
        {"data": "value", "title": "Value"} 
    ], 
    "order": [[1, 'desc']], 
    "createdRow": function(tr, _, rowIndex) { 
        return $(tr).attr('rowindex', rowIndex) 
    }, 
    "bDestroy": true, 
    "pageLength": 50, 
    "lengthMenu": [ 10, 15, 20 , 30, 50],
    // 开启服务端分页模式
    "serverSide": true
});

步骤2：修改后端接口，支持分页查询

后端需要接收DataTables传递的分页参数（draw、start、length等），执行分页查询后，返回符合DataTables规范的JSON结构：

首先创建一个接收前端参数的DTO类（Java示例）：

public class DataTableRequest {
    private int draw;
    private int start;
    private int length;
    private List<Order> order;
    private Search search;
    
    // 内部类，接收排序参数
    public static class Order {
        private int column;
        private String dir;
        // Getter & Setter
    }
    
    // 内部类，接收搜索参数
    public static class Search {
        private String value;
        private boolean regex;
        // Getter & Setter
    }
    
    // Getter & Setter
}

然后修改接口逻辑，实现分页查询：

@PostMapping(value = Paths.SAMPLE, consumes = { MediaType.APPLICATION_JSON }, produces = { MediaType.APPLICATION_JSON }) 
@ResponseBody 
public Map<String, Object> retrieveSamples(@RequestBody DataTableRequest request) {
    // 转换分页参数：start是起始索引，length是每页条数
    int pageNum = request.getStart() / request.getLength();
    int pageSize = request.getLength();
    
    // 执行分页查询，获取当前页数据和总记录数
    Page<SampleData> samplePage = sampleDBDao.retrieveDataByPage(pageNum, pageSize);
    
    // 构造DataTables要求的返回格式
    Map<String, Object> response = new HashMap<>();
    response.put("draw", request.getDraw()); // 与前端传入的draw值一致，用于校验请求
    response.put("recordsTotal", samplePage.getTotalElements()); // 总记录数
    response.put("recordsFiltered", samplePage.getTotalElements()); // 过滤后的记录数（无搜索时与总记录数一致）
    response.put("data", samplePage.getContent()); // 当前页的数据列表
    
    return response;
}

临时替代方案（不推荐用于大数据量）

如果暂时无法修改后端，可以尝试升级jQuery和DataTables版本（你当前的jQuery版本疑似笔误，jQuery 1.x最新稳定版是1.12.4，DataTables也建议升级到较新的1.10.x版本），老版本的客户端分页逻辑可能存在大数据量下的bug。同时检查页面中是否有其他JS代码修改了表格DOM或干扰了DataTables的分页事件。

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