is there any way to get the data from a not visible column from datatables?

Question

I need to hide some columns from my datatable but i also need to grab that hidden data to edit the whole column, if i don't hide anything the whole thing works great but when hiding, is like i deleted the hidden parts because it just leave me with blank spaces. Here is the table code:

tablaProductos = $('#tablaProductos').DataTable({  
"ajax":{            
    "url": "bd/crud.php", 
    "method": 'POST',
    "data":{opcion:opcion}, 
    "dataSrc":""
},
"columns":[
    {"data": "id_prod"},
    {"data": "producto"},
    {"data": "descripcion"},
    {"data": "codigo"},
    {"data": "categoria"},
    {"data": "proveedor", "visible": false},
    {"data": "fecha", "visible": false},
    {"data": "cantidad", "visible": false},
    {"data": "precioc", "visible": false},
    {"data": "preciou", "visible": false},
    {"data": "preciom", "visible": false},
    {"data": "ventas_historial"},
    {"defaultContent": "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEditar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar'><i class='material-icons'>delete</i></button></div></div>"}
]});

And here is the edit code:

$(document).on("click", ".btnEditar", function(){               
opcion = 2;//editar
fila = $(this).closest("tr");           
id_prod = parseInt(fila.find('td:eq(0)').text());             
producto = fila.find('td:eq(1)').text();
descripcion = fila.find('td:eq(2)').text();
codigo = fila.find('td:eq(3)').text();
categoria = fila.find('td:eq(4)').text();
id_pro = fila.find('td:eq(5)').text();
fecha = fila.find('td:eq(6)').text();
cantidad = fila.find('td:eq(7)').text();
precioc = fila.find('td:eq(8)').text();
preciou = fila.find('td:eq(9)').text();
preciom = fila.find('td:eq(10)').text();
ventas_historial = fila.find('td:eq(11)').text();
$("#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 Usuario");       
$('#modalCRUD').modal('show');});          

this is how my teachers teached me to use datatables but i need to get the hidden data from the table inside the edit part, what can i do? i'm new at using js :(

Answer 1

You just need to use rows().data(). So, you'll be able to grab all data from the selected row.

var data = table.row($(this).parents("tr")).data();

You can access the data even if it's a hidden column.

alert("Hidden data - Proveedor: " + data.proveedor);

So, you may associate your custom edit button in this way. See the .btnEditar CSS selector on it.

$("#tablaProductos tbody").on("click", ".btnEditar", function() {
  var data = table.row($(this).parents("tr")).data();
  alert(data.producto);
  alert("Hidden data - Proveedor: " + data.proveedor);
});

The same to your delete button. See the .btnBorrar CSS selector in here:

$("#tablaProductos tbody").on("click", ".btnBorrar", function() {
  var data = table.row($(this).parents("tr")).data();
  var result = confirm("¿Desea borrar " + data.producto + "?");
  if (result) alert("Producto borrado...");
});

See this example:

$(function() {
  var table = $("#tablaProductos").DataTable({
    ajax: {
      url: "https://gist.githubusercontent.com/dannyjhonston/01631786c7f4bceb9aa9fbeb493aecc0/raw/b5f5cadd7f62dd76c367ff99129b701a3083e94b/products.json",
      method: "GET",
    },
    columns: [{
        data: "id_prod",
        title: "ID"
      },
      {
        data: "producto",
        title: "Producto"
      },
      {
        data: "descripcion",
        title: "Descripción"
      },
      {
        data: "codigo",
        title: "Código"
      },
      {
        data: "categoria",
        title: "Categoría"
      },
      {
        data: "proveedor",
        visible: false
      },
      {
        data: "fecha",
        visible: false
      },
      {
        data: "cantidad",
        visible: false
      },
      {
        data: "precioc",
        visible: false
      },
      {
        data: "preciou",
        visible: false
      },
      {
        data: "preciom",
        visible: false
      },
      {
        data: "ventas_historial",
        title: "Ventas Historial"
      },
      {
        "defaultContent": "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEditar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar'><i class='material-icons'>delete</i></button></div></div>"
      }
    ]
  });
  $("#tablaProductos tbody").on("click", ".btnEditar", function() {
    var data = table.row($(this).parents("tr")).data();
    alert(data.producto);
    alert("Hidden data - Proveedor: " + data.proveedor);
  });
  $("#tablaProductos tbody").on("click", ".btnBorrar", function() {
    var data = table.row($(this).parents("tr")).data();
    var result = confirm("¿Desea borrar " + data.producto + "?");
    if (result) alert("Producto borrado...");
  });
}());

<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<table id="tablaProductos" class="display" style="width: 100%;">
</table>

I hope this may help you.