How To Hide A Table Column, But Still Use It With A Click Event? (JQuery Datatables)

Question

I'm getting a RecordID and a Title from my datasource. I only want to display the Title column on screen, but I need the RecordID from the row to be used in a click event. So I'm pulling them both into my table and I'm looking to hide the RecordID.

I have a table that is populated with an ajax source so the <tr> and <td> tags for my data are dynamically created. They aren't part of the code, so I can't simply add a class that I can hide with CSS.

<table id="example">
    <thead>
        <tr>
            <th>RecordID</th>
            <th>TITLE</th>
        </tr>
    </thead>
    <tbody>
        <!---Data and tags are dynamically generated--->
    </tbody>
</table>

The DataTables documentation lists a couple options of adding the function oTable.fnSetColumnVis( 0, false ) or the "bVisible":false attribute. Both of these work fine to hide my column, but then the click event I had based on that column will no longer work.

Here's the click event I'm using.

$('#example').on('dblclick', 'tr', function(event) {
 var td = $('td', this);
 var RecordID= $(td[0]).text();
});

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?

Answer 1

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

$(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":"testclass" },
        { "mData": "TITLE" }
    ]
});
 });

And then the css

.testclass {
display:none;
}

The JQuery still works after this.