Modifying the content of a cell based on the content of another cell (fnRowCallback / ColVis)

damaya1982

I have a table that has a bunch of hidden cells. I am using ColVis, so the user has the option to hide/show the cells. All but two of the cells are populated with sAjaxSource. One of the other two is static (a button), and the other is dynamic (based on a column in the row. Here's my table:

[code]
var table = $('#units');
table.dataTable({
"sScrollY": "250px",
"sScrollX": "100%",
//"sScrollXInner": "500%",
//"sScrollYInner": "500%",
"bScrollCollapse": true,
"bStateSave": true,
"bSortClasses": false,
"oColVis": {
//"buttonText": "Show / Hide columns",
"bRestore": true,
// "sAlign": "left"
},
"iDisplayLength": 500,
"bPaginate": false,
"aLengthMenu": [[-1, 25, 50, 100], ["All", 25, 50, 100]],
"bProcessing": true,
"sAjaxSource": "/cgi-bin/gen_json.pl",
'aoColumns': [
/* 0 Host */ { "mData": "host" },
/* 1 Location */ { "mData": "location" },
/* 2 Serial */ { "mData": "serialnumber" },
/* 3 Outcome */ { "mData": "outcome" },
/* 4 Notes */ { "mData": "notes", "bSortable": false },
/* 5 Type */ { "mData": "type", "bVisible": false },
/* 6 OS Vendor */ { "mData": "os_vendor", "bVisible": false },
/* 7 OS */ { "mData": "os", "bVisible": false },
/* 8 Version */ { "mData": "version", "bVisible": false },
/* 9 Function */ { "mData": "function", "bVisible": false },
/* 10 Inventory Number */ { "mData": "inventory", "bVisible": false },
/* 11 Vendor */ { "mData": "vendor", "bVisible": false },
/* 12 Vendor ID */ { "mData": "vendor_id", "bVisible": false },
/* 13 Support ID */ { "mData": "support_id", "bVisible": false },
/* 14 Purchase Number */ { "mData": "purchase_number", "bVisible": false },
/* 15 Sales Order */ { "mData": "sales_order", "bVisible": false },
/* 16 Actions */ { "mData": "actions", "bSortable": false },
/* 17 Proceed */ { "mData": null,
"mRender": function ( data, type, full ) {
return 'Go';
},
"bSortable": false
}
],
'sPaginationType': 'full_numbers',
"sDom": 'RC<"clear"><"dataTables_header"lfr>t<"dataTables_footer"ip>',
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Bold the grade for all 'A' grade browsers
if ( aData['outcome'] == 'Production' )
{
var data = table.fnGetData(nRow);
data.actions = 'test';
console.log(data);
//table.dataTable().fnUpdate.fnRowCallback(nRow, 'test', 0, 0);
//$(table.dataTable().fnSettings().aoColumns[16], nRow).html( 'A' );
//$('td:eq(5)', nRow).html( 'test' );
}
return nRow;
},
'fnInitComplete': function( oSettings )
{
// Style length select
table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
tableStyled = true;
}
}).fnSetFilteringDelay();

var refreshId = setInterval(function() {
table.fnDraw();
}, 30000);
[/code]

Basically, what I am trying to accomplish with my fnRowCallback is to have the 16th column (i.e., actions) content be a dropdown list whose values are dependent on what's in the outcome column. So, as we can see in the example, if outcome column is equal to production, then action column's dropdown has X values. If it is equal to Test, then action column's dropdown gets a different set of values, and so on.

Now, the problem I am facing here is that the "$('td:eq(5)', nRow).html( 'test' );" works when all the bVisible: false columns are hidden. However, as soon as the user shows one of those columns, the value then gets shifted to what is now the 5th td (i.e., the column they just selected to show). Therefore, I need some way to say column 16 has these values if outcome equals X, not td 5. I am at a loss on how to accomplish this.

damaya1982

I figured it out (finally!). Here's my code:

[code]
var table = $('#units');
table.dataTable({
"sScrollY": "250px",
"sScrollX": "100%",
//"sScrollXInner": "500%",
//"sScrollYInner": "500%",
"bScrollCollapse": true,
"bStateSave": true,
"bSortClasses": false,
"oColVis": {
//"buttonText": "Show / Hide columns",
"bRestore": true,
// "sAlign": "left"
},
"iDisplayLength": 500,
"bPaginate": false,
"aLengthMenu": [[-1, 25, 50, 100], ["All", 25, 50, 100]],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/cgi-bin/gen_json.pl",
'aoColumns': [
/* 0 Host */ { "mData": "host" },
/* 1 Location */ { "mData": "location" },
/* 2 Serial */ { "mData": "serialnumber" },
/* 3 Outcome */ { "mData": "outcome" },
/* 4 Notes */ { "mData": "notes", "bSortable": false },
/* 5 Type */ { "mData": "type", "bVisible": false },
/* 6 OS Vendor */ { "mData": "os_vendor", "bVisible": false },
/* 7 OS */ { "mData": "os", "bVisible": false },
/* 8 Version */ { "mData": "version", "bVisible": false },
/* 9 Function */ { "mData": "function", "bVisible": false },
/* 10 Inventory Number */ { "mData": "inventory", "bVisible": false },
/* 11 Vendor */ { "mData": "vendor", "bVisible": false },
/* 12 Vendor ID */ { "mData": "vendor_id", "bVisible": false },
/* 13 Support ID */ { "mData": "support_id", "bVisible": false },
/* 14 Purchase Number */ { "mData": "purchase_number", "bVisible": false },
/* 15 Sales Order */ { "mData": "sales_order", "bVisible": false },
/* 16 Actions */ { "mData": "actions", "bSortable": false },
/* 17 Proceed */ { "mData": null,
"mRender": function ( data, type, full ) {
return 'Go';
},
"bSortable": false
}
],
'sPaginationType': 'full_numbers',
"sDom": 'RC<"clear"><"dataTables_header"lfr>t<"dataTables_footer"ip>',
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Bold the grade for all 'A' grade browsers
if ( aData['outcome'] == 'Production' )
{
var anTds = table.fnGetTds( nRow );
$(anTds[16]).html( 'test');
}
return nRow;
},
'fnInitComplete': function( oSettings )
{
// Style length select
table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
tableStyled = true;
}
}).fnSetFilteringDelay();

var refreshId = setInterval(function() {
table.fnDraw();
}, 30000);
[/code]

Ended up having to use fnGetTds plug-in and vwa-la! (Also added "bServerSide": true up there, but not sure if that had any impact.)

damaya1982

Alright, this worked perfectly until I reordered my columns. Now, after a reorder anTds[#] does not refer to the same # as before, so the fnRowCallback is not modifying the column number that I want it to be modifying. Is there a better way to do this? (i.e., build custom content of one TD based on the content of another.)