从 jQuery 数据表隐藏列中获取值

Question

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 success

 alert(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>

Answer 1

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 ...
});

Answer 2

How to get all the td values of the table:

var tdItems=[];
$("#myTable tr td").each(function(){
   tdItems.push($(this).text());       
});

They are going to be stored in the array tdItems .

Answer 3

Use jQuery Datatable API functions to get full row data including hide columns -

• fnGetPosition
• fnGetData

First get instance of datatable and then execute functions to get complete row data. For example, you want to get complete row data on clicking on particular row, below code can help inside fnDrawCallback callback function of table -

"fnDrawCallback": function (oSettings) {
    var oTable = $('#example').dataTable();
    $('#example tbody tr').on('click', 'tr', function () {            
        var position = oTable.fnGetPosition(this);
        var full_row = oTable.fnGetData(position);
        console.log(full_row);  // will print full row data including hide columns
    });              
 }

Thanks

Answer 4

I know your question is old, but if someone still have problems, try this:

let table = $('#myTable').DataTable();
let row = table.row(0);
let genero = row.data()['genero'];
let nivel_puesto = row.data()['nivel_puesto'];