column rendering question

chezball

I am having some trouble reordering a dynamically added column to my table.

Through Server Side Processing, I return data with 8 columns. Using aoColumns (or aoColumnDefs, I tried both), I added a 9th column for a checkbox. This works fine if it is the last column, but I can't seem to move it to the left most side without all of the other columns being shifted (showing the data to the right). I understand the two column parameters are different, and I thought I could use aTargets to force it, but st

My Table is just a placeholder:
[code]


[/code]

The options I have tried are (removed two middle columns to make post fit):
[code]
var aoColumnsOne = [
{ "sTitle": '', "bSortable": false, "fnRender": function () { return ''; } },
{ "sName": "ATDataId", "bVisible": false, "bSortable": false },
...
{ "sTitle": "Data Name", "sName": "DataName" },
{ "sTitle": "Data Owner", "sName": "DataOwner" },
{ "sTitle": "Data Owner Type", "sName": "DataOwnerType", "bVisible": false },
{ "sTitle": "Data Type", "sName": "DataType" },
{ "sTitle": "User Count", "sName": "UserCount" }
];

var aoColumnDefsOne = [
{ "sName": "ATDataId", "bVisible": false, "bSortable": false, "aTargets": [0] },
...
{ "sTitle": "Data Name", "sName": "DataName", "aTargets": [3] },
{ "sTitle": "Data Owner", "sName": "DataOwner", "aTargets": [4] },
{ "sTitle": "Data Owner Type", "sName": "DataOwnerType", "bVisible": false, "aTargets": [5] },
{ "sTitle": "Data Type", "sName": "DataType", "aTargets": [6] },
{ "sTitle": "User Count", "sName": "UserCount", "aTargets": [7] },
{ "sTitle": '', "bSortable": false, "fnRender": function (oObj) { return ''; }, "aTargets": [8] }
];

var aoColumnDefsTwo = [
{ "sTitle": '', "bSortable": false, "fnRender": function (oObj) { return ''; }, "aTargets": [0] },
{ "sName": "ATDataId", "bVisible": false, "bSortable": false, "fnRender": function (oObj) { return oObj.aData[0]; }, "aTargets": [1] },
...
{ "sTitle": "Data Name", "sName": "DataName", "fnRender": function (oObj) { return oObj.aData[3]; }, "aTargets": [4] },
{ "sTitle": "Data Owner", "sName": "DataOwner", "fnRender": function (oObj) { return oObj.aData[4]; }, "aTargets": [5] },
{ "sTitle": "Data Owner Type", "sName": "DataOwnerType", "bVisible": false, "fnRender": function (oObj) { return oObj.aData[5]; }, "aTargets": [6] },
{ "sTitle": "Data Type", "sName": "DataType", "fnRender": function (oObj) { return oObj.aData[6]; }, "aTargets": [7] },
{ "sTitle": "User Count", "sName": "UserCount", "fnRender": function (oObj) { return oObj.aData[7]; }, "aTargets": [8] }
];
[/code]

And the code to initialize the table is ONE of these:
[code]
"aoColumnDefs": aoColumnDefsOne
//"aoColumnDefs": aoColumnDefsTwo
//"aoColumns": aoColumnsOne
[/code]

I then tried adding the column on the client side to the raw data, in the ajax callback:
[code]
"success": function (data, textStatus, XMLHttpRequest) {
$.each(data.aaData, function (n, val) {
val.unshift('');
});
fnCallback(data, textStatus, XMLHttpRequest);
},
[/code]

But that ended up giving me undefined columns at the end as well.

So my question is, what is the best practice on how to add a dynamic column to the front of the table from the client side only (after all this is a presentation issue), and is there working code of how this is done (I have seen lots of round about ways, but they all seem to rely upon the column already existing (this (http://datatables.net/examples/advanced_init/column_render.html) being the canonical example))?

Thanks.