如何从DataTables隐藏列中获取数据用于编辑？

问题描述 #

在DataTables中设置部分列visible: false隐藏后，通过jQuery的fila.find('td:eq(n)').text()获取隐藏列的数据时返回空值，但未隐藏时功能正常，需要获取这些隐藏列数据用于编辑操作。

问题原因 #

当DataTables设置列visible: false后，这些列对应的<td>元素不会渲染到DOM中，通过DOM索引查找td的方式自然拿不到数据；同时隐藏列会改变可见列的索引顺序，导致你原来的eq(n)索引对应的数据完全错位。

解决方案 #

不要操作DOM元素获取数据，改用DataTables官方提供的row().data()方法直接获取该行的完整数据源对象——这个对象包含所有列的数据（无论列是否隐藏），且结构和你从AJAX接口拿到的原始数据完全一致。

修改后的编辑代码 #

$(document).on("click", ".btnEditar", function(){               
    opcion = 2;//editar
    // 获取当前点击行对应的DataTables行对象
    const filaDT = tablaProductos.row($(this).closest("tr"));
    // 获取该行的完整数据对象
    const datosFila = filaDT.data();
    
    // 直接从数据对象中提取字段，无需依赖DOM索引
    id_prod = parseInt(datosFila.id_prod);              
    producto = datosFila.producto;
    descripcion = datosFila.descripcion;
    codigo = datosFila.codigo;
    categoria = datosFila.categoria;
    id_pro = datosFila.proveedor; // 对应表格中隐藏的proveedor列
    fecha = datosFila.fecha;
    cantidad = datosFila.cantidad;
    precioc = datosFila.precioc;
    preciou = datosFila.preciou;
    preciom = datosFila.preciom;
    ventas_historial = datosFila.ventas_historial;
    
    $("#producto").val(producto);
    $("#descripcion").val(descripcion);
    $("#codigo").val(codigo);
    $("#categoria").val(categoria);
    $("#id_pro").val(id_pro);
    $("#fecha").val(fecha);
    $("#cantidad").val(cantidad);
    $("#precioc").val(precioc);
    $("#preciou").val(preciou);
    $("#preciom").val(preciom);
    $("#ventas_historial").val(ventas_historial);
    
    $(".modal-header").css("background-color", "#007bff");
    $(".modal-header").css("color", "white" );
    $(".modal-title").text("Editar Producto"); // 修正原代码里的标题笔误
    $('#modalCRUD').modal('show');
});          

关键改动说明 #

• 用tablaProductos.row($(this).closest("tr"))获取DataTables的行对象，而非仅拿jQuery的<tr>元素
• 调用row().data()拿到完整行数据，不受列显示状态影响
• 直接通过对象属性提取数据，无需关心列的显示顺序，后续调整列顺序或显示状态也不会出错

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