DataTables折叠列展开后输入框数据丢失问题求助

问题根源 #

DataTables的响应式展开面板默认是克隆原始单元格的初始DOM内容生成的，而非直接复用原列元素。如果输入框的值是用户后续动态输入的，克隆的元素只会保留初始空值，导致展开后看不到输入内容；而全屏时显示的是原列的真实DOM，所以数据正常。你添加的responsive-display事件处理逻辑错误，因为columns参数指向的是克隆后的元素，强制show()无法解决值同步问题。

解决思路与代码修改 #

1. 自定义响应式展开面板的内容渲染器

替换默认的克隆逻辑，手动读取当前行所有输入框的实时值，生成带有效数据的展开内容：

var table = $('#example').DataTable({
    responsive: true,
    paging: true,
    searching: true,
    ordering: false,
    info: true,
    columnDefs: [
        {targets: 7, responsivePriority: 8},
        {targets: 6, responsivePriority: 7},
        {targets: 5, responsivePriority: 6},
        {targets: 4, responsivePriority: 5},
        {targets: 3, responsivePriority: 4},
        {targets: 2, responsivePriority: 3},
        {targets: 1, responsivePriority: 2},
        {targets: 0, responsivePriority: 1}
    ],
    // 自定义响应式展开内容
    responsive: {
        details: {
            renderer: function(api, rowIdx, columns) {
                var data = $.map(columns, function(col, i) {
                    // 针对输入框列，读取当前实时值
                    if (col.columnIndex >= 1 && col.columnIndex <=7) {
                        var inputVal = api.cell(rowIdx, col.columnIndex).nodes().to$().find('input').val();
                        return '<tr><td>'+col.title+':</td><td><input type="number" value="'+inputVal+'"></td></tr>';
                    }
                    // 非输入框列直接返回原内容
                    return '<tr><td>'+col.title+':</td><td>'+col.data+'</td></tr>';
                }).join('');
                return data ? $('<table/>').append(data) : false;
            }
        }
    }
});

2. 移除无效的responsive-display事件处理

这段代码对解决问题毫无帮助，反而可能干扰DataTables的默认响应式逻辑，直接删除：

// 删掉这段无效代码
$('#example').on('responsive-display', function(e, datatable, row, columns) {
    $(columns).each(function() {
        $(this).show();
    });
});

3. 输入值变更时同步到DataTables数据源

确保用户输入的内容被更新到DataTables内部维护的数据源中，这样后续任何操作（包括展开、分页、搜索）都能获取到最新值：

$('#example').on('input', 'input[type="number"]', function() {
    var $input = $(this);
    // 获取当前单元格的行索引和列索引
    var rowIdx = $input.closest('tr').find('td').first().data('dt-rowindex');
    var colIdx = $input.closest('td').index();
    // 更新DataTables数据源
    table.cell(rowIdx, colIdx).data($input.val());
    // 执行你的计算逻辑
    calculateTotal();
});

4. 优化窗口resize逻辑

保留resize事件，但简化为更高效的写法：

$(window).resize(function() {
    table.responsive.recalc();
});

额外注意事项 #

• 确保表格单元格中的输入框在初始化时，通过DataTables的data属性或直接在DOM中设置初始值，保证初始渲染时数据能被正确读取。
• 如果使用分页功能，需注意输入值的持久化，切换分页时DataTables会重新渲染行，要确保数据源中的值能正确回填到输入框。

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