[solved] how to add styling to the text in a cell (not the whole table cell)?

rw1

hello,

in firebug i can wrap a div style around the text in a table cell by editing the html with:

[code]


cell text


[/code]

if i add this style just to:

[code]
tr.odd td.sorting_1 {

}
[/code]

in demo_table_jui.css, it applies this style to the whole cell and not just the text within the cell.

i want the style applied just to the text.

so i am thinking i have to somehow hardcode a div to wrap around the text and then style this div in the css file.

can anyone tell me:

- if this is the best way to do it?
- what file i would have to edit to hardcode the additional div around the text (the data comes from the server so i don't know where the rows are being generated).

thank you!

girishmr

Hope this helps. This is a working code for Amount field.

[code]
"aoColumnDefs": [
{
"aTargets":[4],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
if(sData >= 0) {
$(nTd).css('color', 'green')
$(nTd).css('text-align', 'right')
} else {
$(nTd).css('color', 'red')
$(nTd).css('text-align', 'right')
}
}
},

],
[/code]

Girish

rw1

thank you for your reply, i am using this:

[code]
"aoColumnDefs": [
{
"aTargets":[0],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
if(sData != 'NULL') {
$(nTd).css('border', '1px solid #ccc')
$(nTd).css('border-radius', '5px')
$(nTd).css('padding', '1px 2px 1px 5px')
$(nTd).css('background-color', '#999')
$(nTd).css('margin-left', '-5px')
$(nTd).css('margin-top', '2px')
$(nTd).css('margin-bottom', '-2px')
} else {
$(nTd).css('color', 'red')
$(nTd).css('text-align', 'right')
}
}
},
],
[/code]

and it is working which is great but it is still applying the styling to the whole table cell, and not just the text (like it does if i wrap a div directly around the content).

to illustrate this better:

using the above code generates this:
https://docs.google.com/open?id=0B7YYPRL2as5JNkhYUkhPUzd0ams

using a div wrapped around the content that is stored in the database generates this
(this is what i want):
https://docs.google.com/open?id=0B7YYPRL2as5JUEVibndsdEgya1U

firebug shows that with the above code it is creating a td style:
[code]
cell text
[/code]

is it possible to generate instead a div style that wraps around the cell text?

[code]
cell text
[/code]

this would create the desired effect.

thanks!

girishmr

This is what I achieved from the above code I gave earlier

https://docs.google.com/open?id=0B3byz7-Mzop5MzYybEVhbFdrV0E

Thanks,

rw1

thank you for your reply.

yes, from what i can see that seems to change the text color, but what i am trying to achieve is this:
https://docs.google.com/open?id=0B7YYPRL2as5JUEVibndsdEgya1U

and my modification of your code above makes this:
https://docs.google.com/open?id=0B7YYPRL2as5JNkhYUkhPUzd0ams

i think this is because it just adds a style to the td and what i need it to do is add a div style around the text in the table cell.

i have come across bUseRendered and i am trying to make this work so that for each cell created in the first column it will append:

1. before the text in the cell and
2. after the text in the cell.

if anyone could assist me in implementing this it would be great.

thank you.

actually it looks like mRender is now the thing to use...

if anyone could assist me in achieving the appending mentioned above that would be great.

thank you.

rw1

just to clarify my question, can anyone please tell me how to append:



before the text in the cell and



after the text in the cell.

for all cells in column one (the data is coming from a database).

rw1

SOLUTION - WOO HOO!

i used mRender with exactly the following:

[code]
"aoColumnDefs": [
{
"aTargets": [ 0 ],
"mData": "0",
"mRender": function ( data, type, full ) {
return ''+data+'';
}
}
],
[/code]

rw1

extra:

if you wanted to style two different columns differently you could do the following, note i have also moved the css into two classes that can be styled in your custom theme (eg /examples/examples_support/themes/ui-your-theme/jquery-ui-1.8.23.custom.css):

[code]
"aoColumnDefs": [
{
"aTargets": [ 0 ],
"mData": "0",
"mRender": function ( data, type, full ) {
return '' +data+ '';
}
},
{
"aTargets": [ 4 ],
"mData": "4",
"mRender": function ( data, type, full ) {
return '' +data+ '';
}
}
],
[/code]

note this will apply styling to the content of the cells in the first and fifth columns.