如何在DataTable数据为空时重绘表格并更新start与length参数

问题分析 #

你现有代码的核心问题在于：

• 在drawCallback中错误操作了api.rows().data()返回的数据集合，而非请求参数对象
• 全局的start变量没有被正确传递到AJAX请求中
• 未处理重复请求的边界情况，可能导致无限循环

解决方案 #

1. 使用ajax.data动态函数生成请求参数，确保每次请求都携带最新的start、length以及原有查询参数
2. 在drawCallback中判断当前页数据为空时，更新全局start变量并触发重新绘制，同时增加边界判断避免无限请求
3. 移除无效的data.start赋值逻辑，改用全局变量控制分页参数

修改后的完整代码 #

var start = 0; // 全局分页起始位置
var length = 10; // 每页条数
var hasMoreData = true; // 标记是否还有更多数据可加载

itemTabel = $('#reciept-table').DataTable({
    processing: true,
    serverSide: true,
    searching: true,
    dom: 'Bltrip',
    buttons: [
        {
            extend: 'excel',
            action: newexportaction
        },
        {
            extend: 'print',
            action: newexportaction
        }
    ],
    pageLength: 10, // 替换废弃的_iDisplaylength
    language: {
        lengthMenu: "Show _MENU_ rows",
        info: "Showing _START_ to _END_ of _TOTAL_ rows"
    },
    columnDefs: [
        {
            orderable: false,
            targets: [0]
        },
        {
            orderable: true,
            targets: '_all'
        }
    ],
    responsive: true,
    ajax: {
        url: "<?= base_url('Order/ViewGenerateReceipt_item')?>",
        type: "POST",
        // 动态生成请求参数，确保每次请求都带最新的分页参数和原有查询条件
        data: function(d) {
            // 保留原有查询参数
            d.customer = customer;
            d.date = date;
            d.to_date = to_date;
            d.status = status;
            d.is_report = is_report;
            // 替换DataTable默认的start和length为全局变量
            d.start = start;
            d.length = length;
            return d;
        }
    },
    select: {
        style: 'multi'
    },
    drawCallback: function(settings) {
        var api = this.api();
        var currentData = api.rows().data();
        
        // 更新统计信息
        $('#tot_weight').html(settings.json.tot_weight.toFixed(3));
        $('#tot_fine').html(settings.json.tot_fine.toFixed(3));
        $('#tot_wfine').html(settings.json.tot_wfine.toFixed(3));

        // 当前页为空且还有数据可加载时，请求下一页
        if (currentData.length === 0 && hasMoreData) {
            // 检查总记录数是否大于当前start，避免无限请求
            if (settings.json.recordsTotal <= start) {
                hasMoreData = false;
                return;
            }
            // 更新起始位置
            start += length;
            // 触发重新绘制（带新的分页参数）
            itemTabel.draw(false); // false表示保留当前排序/搜索状态
        }
    },
    rowCallback: function(row, data) {
        if ($.inArray(data.DT_RowId, selectedProductId) !== -1) {
            $(row).addClass('selected');
            $('#select-all').prop('checked', true);
        } else {
            // 优化：检查是否所有行都未选中再取消全选
            var selectedCount = api.rows('.selected').count();
            $('#select-all').prop('checked', selectedCount === api.rows().count());
        }
    }
});

关键说明 #

• ajax.data函数：动态合并原有查询参数和最新的分页参数，确保每次请求参数正确
• hasMoreData变量：防止当总记录数小于等于当前start时，继续发起无效请求
• itemTabel.draw(false)：false参数表示保留当前的排序、搜索状态，只更新分页数据
• 替换了废弃的_iDisplaylength为官方推荐的pageLength参数

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