How do you add rows to a jQuery dataTable with hidden columns?

I'm using the jQuery dataTables plugin to upgrade HTML tables.

The 1st column of the dataTable contains the row's primary key and is hidden. The only way I could succesfully accomplish this was to add either the CSS style "display: none;" or "visibility: collapsed;"

When the table is upgraded t开发者_StackOverflowo a dataTable, the "aoColumns" for the 1st column also has "bVisible" : false, to instruct the dataTable to hide this column.

When invoking fnAddData(...) to add a new row of data to the table, the data for the hidden column appears in the 1st visible column, and each subsequent cell of data is shifted one cell to the right.

Simply put, it appears as though the dataTable is "forgetting" that the column is hidden. The primary key is essential for the purposes of AJAX postbacks.

Any ideas on how to work around this problem?

---

Do you have auto generated columns? Or fixed columns?

if you have fixed columns:

just need to set a sClass for the ID column.

<style>
.hidden{
 display:none;
 }
</style>
oTable = $('#table').dataTable( {  
"aoColumns" : [     
    { sTitle: 'id', sClass: "hidden" }  
]   } );

if you have auto gneratet columns:

you just define the ID Column in the Column array with the (sClass:'hidden')

---

Update:

Shortly after posting this question, I discovered that moving the hidden column so that it's not the 1st column was a (the?) solution. Any comments?