Read Value of Hidden Column in JQuery

Question

I need to hide a column on the table, but after that I cannot read selected row's hidden column value.

 dtTable = $('#lookupTable').DataTable({
       "columnDefs": [
           {
               "targets": [ 0 ],
               "visible": false,
               "searchable": false               
           }
        ],  

        aaData: data,
        aoColumns: cols,
        paging: false,
        scrollCollapse: true,
        destroy: true

    });

as you see the first column is hidden now. And I am trying to read the column value with that code

    selectedIndex = $(this).find('td:eq(0)').text(); 

if i delete <"visible": false> from the code i can read the first column's value, but if it is hidden it gives me second column value.

I tired to change "witdh" property but it didnt work..

Answer 1

The CSS selector wont work, because "visible": false in your columnDefs does not mean that the column gets the equivalent display: none; style property in the markup.

Instead, you'll have to use the DataTables API to get the data in the hidden column.

The function fnGetData will do the trick. It returns the text data in the cell that is passed as an argument to the function.

Heres the example from the documentation

oTable.$('td').click( function () {
    var sData = oTable.fnGetData( this );
    alert( 'The cell clicked on had the value of '+sData );
});

In your case, the column is hidden, thus you'll have to combine it with a second API call. Say that you click the row with the hidden first column, you can combine the fnGetData with the fnGetPosition function.

var position = dtTable.fnGetPosition(this);
var hiddenColumnValue = dtTable.fnGetData(position)[0];

Check the documentation, it has some great examples.

fnGetData()

fnGetPosition()

This is the working code

  $('#lookupTable tbody').on('click', 'tr', function () {

        selectedIndex = dtTable.row(this).data()[0];   
 });

Answer 2

Another Soultion Is Add Css Class ID Fiekd Visbilety hideen And $(this).find('td:eq(0)').text(); Retrive The value..

Answer 3

The correct answer is pretty old. So, if the correct answer does not work out for you. Please try this method :

selectedIndex = dtTable.row(this).data();

This code will return the raw json object which was fetched for this row. something like :

{
   "modify":"false",
   "lastModify":"Tuesday",
   "name":"abc",
   "DT_RowId":"row_1",
   "fileID":"0bde976"
}

To get the "fileID" you just need to :

alert("ID = "+selectedIndex.fileID);

Answer 4

var dtTable = $('#test').DataTable() 

      $('#test tbody').on('click', 'tr td .fa-pencil', function (e) {
                    ID = (dtTable.row($(this).closest('tr')).data().Id);
});

`

Answer 5

Go through the dataTables API and you have multiple ways to retrieve data from hidden columns the correct way. For example you can use cells. As you see in the link you can use all kind of selectors with cells, like a jQuery selector.

Here a very simple example that logs out the values of the first column that has been hidden :

var dtTable = $('#example').DataTable()  

dtTable.columns([0,1,2]).visible(false);

for (var i=0;i<10;i++) {
    console.log(dtTable.cells({ row: i, column: 0 }).data()[0]);
}    

http://jsfiddle.net/oumtdd6k/

It cannot be emphasized enough : Always go through the API, do not try to use traditional jQuery on an initialised dataTable!!

In this case the reason is obvious : jQuery can only access elements that actually is in the DOM. When you hide columns in dataTables they are not hidden as in display: none, they are simply not rendered!