alternate coloring of rows

nischalinn

i've to customize the color of the alternate rows of datatables replacing the default color of the datatables rows. how can I do it??

jainankit0312

Hi,

I am using fnAddData() to add rows. Use the following code to get the latest row handler of the table.
I used a global variable rowName.

var oSettings = oTable.fnSettings();
var row = oSettings.aoData[a[0]].nTr;
if(rowName == "ODD")
{
row.className = "io-package-odd";
rowName = "EVEN";
}
else if(rowName == "EVEN")
{
row.className = "io-package-even";
rowName = "ODD";
}

Regards,
Ankit

nischalinn

thanks for the help. but I didn't understand how to set colors for the alternate rows. datatables set default color of the alternate rows and I've to provide my own color.

jainankit0312

Hi,

Data table do it by using :

$(nBody).children('tr:even').addClass( oSettings.asDestroyStripes[0] );
$(nBody).children('tr:odd').addClass( oSettings.asDestroyStripes[1] );

Search for the above code in JS file and instead of passing the 'oSettings.asDestroyStripes[x] ' pass the name of your own class.

Regards,
Ankit

allan

The init asStripeClasses is how you can pass in your own classes - but tr.odd and tr.even is probably enough. Changing the background colours for rows is just a case of changing the CSS:

[code]
table.dataTable tr.odd { background-color: #E2E4FF; }
table.dataTable tr.even { background-color: white; }
[/code]

Allan

bbarani

I am trying to change the color of rows in datatable using the below CSS.

table.dataTable tr.odd { background-color: #E2E4FF; }
table.dataTable tr.even { background-color: white; }

This change doesnt seem to affect first column in datatables, I can see the new color in other columns.

Can someone please let me know the reason for this issue?

Thanks Barani

zmt

Hi, there is class element .sorting_1 for first (or sorting) column.

[code]
table.dataTable tr.odd .sorting_1 { background-color: #E2E4FF; }
table.dataTable tr.even .sorting_1 { background-color: white; }
[/code]

- zmt -