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({
       \"c         


        

Answer 1

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

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

`

Answer 2

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!

Answer 3

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 4

Traditional jquery wont work on datatable , you have to use API defined methods to get the value. In my case this worked fine to get hidden column value on button click in each row -

$(function () {
       var t = $('#mytableid').DataTable({
            "columnDefs": [{
                "searchable": false,
                "orderable": false,
                "visible":false,
                "targets": [0]
            }]
        });

        $('#mytableid').on('click', '.btnClass', function () {
            var currentRow = $(this).closest("tr");
            var columnvalue = t.row(currentRow).data()[0];
            console.log(columnvalue);
        });
});

Answer 5

Adding to this as this is old, and none of the answers had the quick, clean jquery format I was used to. You can use the traditional jquery selectors even if the objects you are trying to access are not currently rendered in the DOM, i.e. hidden or on another page, by doing it as a method of the Datatable. So in your case:

dtable.$("yourJQuerySelector")

This will select the element as you are used to and worked for my case.

Answer 6

var table= $('#tablename').DataTable();

var hiddenColumnData1 = table.row('#trIdName').data()[1];
var hiddenColumnData2 = table.row('#trIdName').data()[2];

console.log("First Hidden Column Data of 'trIdName' : "+hiddenColumnData1) 
console.log("Second Hidden Column Data of 'trIdName' : "+hiddenColumnData1)