How To Hide A Column, But Still Use It With Double Click Event

madvora

I have a table with an ajax source. The data rows are dynamically generated, so I can't add a class that I can just hide.
I can hide a column just fine with oTable.fnSetColumnVis( 0, false ) or "bVisible":false.

However the problem I have is that I have a double click event that reads from the first column of the row I click on, so if I hide that column, the event no longer works.

Here is the click event I'm using...
[code]
$('#example').on('dblclick', 'tr', function(event) {
var td = $('td', this);
var RecordID= $(td[0]).text();
});
[/code]

So you can see it's accessing the index of 0 (the first td or column in that row.) Once I hide that column, another td becomes index of 0.
I still need that RecordID column to get information from the row, but I don't want to show it on screen. Any ideas?

madvora

I figured this out by just adding a class when declaring the table.

[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bJQueryUI": true,
"bProcessing": false,
"bServerSide": false,
"bFilter":false,
"bPaginate":false,
"bInfo":false,
"bSort":false,
"bAutoWidth":false,
"sAjaxSource": "datasource.cfm",
"aoColumns": [
{ "mData": "RecordID", "sClass":"hide" },
{ "mData": "TITLE" }
]
});
});
[/code]

Then hiding the class in css.

[code]
.hide {
display:none;
}
[/code]

allan

Hiding columns that way can lead to table alignment issues in some browsers. That's why DataTables removes the elements from the document.

The 1.10 API provides the new `column()` method which can be used to select the nodes: `column().nodes()` specifically. The new API is documented here: http://next.datatables.net/reference/api .

Allan