How to add static data to a data driven table ?

southof40

I'm sure this is very simple but I've got a hit a blank spot.

I've got a table which is populated from a JSON array ...

[code]
oTable = $('#tblTSE').dataTable({
"aaData": aDataSetDynamicTSE,
"bProcessing": true,
"aoColumns": [
{ "sTitle": "TSE_AUTOID", "bVisible": false },
{ "sTitle": "STARTDATETIMEFORSORT", "bVisible": false },
{ "sTitle": "ENDDATETIMEFORSORT", "bVisible": false },
{ "sTitle": "Start/End", "iDataSort": 1 },
{ "sTitle": "Activity" },
{ "sTitle": "Sub-Act" },
{ "sTitle": "Reason" }
],
"aaSortingFixed": [[1, 'asc']],
"bJQueryUI": true,
"bPaginate": false,
"bFilter": false
});
//Hang a click event handler on each row and so allow for
//the editing dialog box to open on clicks of rows
$('#tblTSE tbody tr').live('click', function () {
var aData = oTable.fnGetData(this);
var TSEId = aData[0];
$('#spanHDNTSEID input').val(TSEId);
PopulateTSEForm(TSEId);
validators['dialog-tse-insupd'].resetForm();
var frmTSE = $('#dialog-tse-insupd');
$('#dialog-tse-insupd').dialog('open');
jQuery("#dialog-tse-insupd").dialog('option', 'position', 'center');
});
[/code]

... and I want to have an extra column on the left hand side of the table which will hold an 'arrow image'. I will make this 'arrow image' visible via CSS when the user is hovering over that row to highlight what row the user is on.

The 'arrow image' could be an IMAGE element or a css background-image for the cell.

Is there a good way to do this without diving into the JSON array and rewriting it ?

thanks

allan

Yes - use mDataProp for your columns: http://datatables.net/blog/Extended_data_source_options_with_DataTables . Have the first column with mDataProp of null (i.e. default content / empty string), the second column with mDataProp of 0, third with 1 etc.

The alternative is just to loop over your array of data and unshift an empty string onto the start of each row of data before passing it to DataTables.

Allan