mRender to alter a cells display color

AmenRa

I would like to change the font color of the data that is being displayed in the table.
I have set an attribute called 'data-changed' and would like mRender to check if it's true or false.
If the attribute is true then I would like to alter the font color.

But I'm stuck. Not sure how to get the cell object so that I can test for the attribute and then how to apply the font color change.

[code]


Some Data
Some Data



/* Init dataTable */
var oTable = $( '#tableRates' ).dataTable(
{
"sPaginationType": "full_numbers",
"bStateSave": true,
"aoColumnDefs":
[
"mRender": function( data, type, row )
{
if ( type === 'display' )
{
/* Test cell attribute 'data-changed' */
}
}
]
} );
[/code]

allan

To modify the cell DOM properties, you need to use fnCreatedCell rather than mRender. mRender is just a string manipulation function and doesn't have any access to the DOM elements.

Allan

AmenRa

Thank you allan,

One more quick question - how do I get access to my attribute 'data-changed' in my element so I can test whether or not to change the color?

AmenRa

Never mind, I figured it out.

[code]
/* Init dataTable */
var oTable = $( '#tableRates' ).dataTable(
{
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"aoColumnDefs":
[
{
"aTargets": [ 2, 3, 4 ],
"fnCreatedCell": function( nTd, sData, oData, iRow, iCol )
{
if ( nTd.attributes[ "data-changed" ].value === "true" )
{
$( nTd ).css( 'color', 'blue' );
}
}
}
]
} );
[/code]

AmenRa

Alan, that works fine for creating the cell but what do you do when the cell is updated using jEditable?

allan

Probably manipulate the DOM directly using jQuery or DOM methods.

Allan

AmenRa

for others:

[code]
/* Apply the jEditable handlers to the table */
$( ".editable", oTable.fnGetNodes( ) ).editable(
"/rates/detail/save",
{
callback: function( sValue, y )
{
/* Update the 'data-changed' attribute in the td node */
this.setAttribute( 'data-changed', 'true' );
/* Set the color to show the td node was changed */
this.style.color = 'blue';
/* Set the td node data */
var mPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, mPos[0], mPos[1], true );

/* Restore bootstrap popover */
$( oTable.fnGetNodes( ) ).children( 'td.editable' ).popover(
{
// This is what matters!!
"container": "body",
"animated": true,
"placement": "bottom",
"trigger": "hover"
} );
},
submitdata: function( value, settings )
{
return {
"_token": "{{ csrf_token() }}",
"ratesheader_id": "{{ $RatesHeader -> id }}",
"prtnum": this.parentNode.getAttribute( "data-prtnum" ),
"trmnum": this.getAttribute( "data-trmnum" )
};
},
"height": "14px",
"select": true
} );
[/code]