Get the values from jQuery Datatable hidden columns

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>

Gyrocode.com · Accepted Answer · 2017-04-19 21:14:34Z

22

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

answered Apr 19, 2017 at 21:14

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Haeberle · Accepted Answer · 2017-04-19 21:12:39Z

0

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.

answered Apr 19, 2017 at 21:12

Felix Haeberle

1,61414 silver badges21 bronze badges

Comments

Rahul · Accepted Answer · 2020-08-26 11:20:27Z

-1

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

edited Aug 26, 2020 at 11:20

answered Aug 26, 2020 at 11:00

Rahul

1,1832 gold badges13 silver badges24 bronze badges

Comments

Dix · Accepted Answer · 2023-01-12 18:25:44Z

-1

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'];

answered Jan 12, 2023 at 18:25

Dix

11 bronze badge

Collectives™ on Stack Overflow

Get the values from jQuery Datatable hidden columns

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related