Read Value of Hidden Column in JQuery

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

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!