Get the values from jQuery Datatable hidden columns
12,105
Use the code below:
$("#myTable").on('click', '#select', function (e) {
e.preventDefault();
var currentRow = $(this).closest("tr");
var data = $('#myTable').DataTable().row(currentRow).data();
console.log(data['genero']);
console.log(data['nivel_puesto']);
// ... skipped ...
});
Author by
Admin
Updated on July 29, 2022Comments
-
Admin almost 2 years
I have a jQuery datatable populated with info from a db' table and I have hidden two columns, now I need to get the value from the two hidden columns but I couldn´t, this is the code of my datatable and had set the property visible: false for the two last columns
$('#myTable').DataTable({ searching: false, paging: true, responsive: true, ordering: false, bInfo: false, bLengthChange: false, processing: true, info: false, deferRender: true, orderMulti: false, "ajax": { "url": "../home/CargarTabla?id=" + noDocumento, "type": "GET", "datatype": "json" }, "columns": [ { "data": "nombres", "autoWidth": true, "orderable": false }, { "data": "apellidos", "autoWidth": true, "orderable": false }, { "data": "dui", "autoWidth": true, "orderable": false }, { "data": "numero_isss", "autoWidth": true, "orderable": false }, { "data": "cargo_participante", "autoWidth": true, "orderable": false }, { "data": "genero", "autoWidth": true, "orderable": false, "visible": false }, { "data": "nivel_puesto", "autoWidth": true, "orderable": false, "visible": false }, { "defaultContent": " <a href='#' id='select'>Modificar</a> ", "autoWidth": true, "orderable": false } ], "oLanguage": { "sEmptyTable": "No hay registros disponibles", "sInfo": " _TOTAL_ registros. Mostrando de (_START_ a _END_)", "sLoadingRecords": "Por favor espera - Cargando...", "sSearch": "Filtro:", "sLengthMenu": "Mostrar _MENU_", "oPaginate": { "sLast": "Última página", "sFirst": "Primera", "sNext": "Siguiente", "sPrevious": "Anterior" }, "oAria": { "sSortAscending": ": Activar para ordenar la columna de manera ascendente", "sSortDescending": ": Activar para ordenar la columna de manera descendente" } } });
and this is the way I get the value from the columns that are visible to the user, it works just fine:
$("#myTable").on('click', '#select', function (e) { e.preventDefault(); var currentRow = $(this).closest("tr"); var Nombres = currentRow.find("td:eq(0)").text(); var Apellidos = currentRow.find("td:eq(1)").text(); var DUI = currentRow.find("td:eq(2)").text(); var ISSS = currentRow.find("td:eq(3)").text(); var Cargo = currentRow.find("td:eq(4)").text(); alert(Nombres + Apellidos + DUI +ISSS+ Cargo); });
But how I get the values from the hidden columns? I have tried this in the
$("#myTable").on('click', '#select', function (e)
with no successalert(table.row(this).data()[5]); alert(table.row(this).data()[6]);
other way with no success
var row = $(this).parents("td")[0]; var pos = oTable.fnGetPosition(row); var Genero = oTable.fnGetData(pos[5])["idGenero"];
and last
var arr = $('#myTable').dataTable().fnGetData($(currentRow)); var Genero = arr[5]; var Nivel = arr[6];
could you please help me to get the values from the hidden columns with the script code showed? BTW this is the HTML code
<div class="table-responsive"> <table class="table table-striped table-condensed" id="myTable" style="width:100%; margin:0 auto;"> <thead> <tr> <th>Nombres</th> <th>Apellidos</th> <th>DUI</th> <th>ISSS</th> <th>Cargo</th> <th>Sexo</th> <th>Nivel</th> <th></th> </tr> </thead> <tbody></tbody> </table> </div>