Lost column/cell style upon sort
Lost column/cell style upon sort
Hi All,
I have the following:
[code][/code]
basically it makes this column (td = 0) the same colour as the rest of the page background, removing the grey/white row striping. When the row data indicates admitted=true, it toggles the visibility of the element so that a green box can be seen with a label in it. The label data is a number that is in another column (td = 30). I have this column (td = 0) sorting using col 30 as the sort source.
The sorting works great BUT the css on the column breaks and i can see the row banding now for all rows for this first cell/column. i've tried settind the "sClass": "admitted" with a css of:
[code]
table.dataTable td.admitted
{
background-color:#3a4f63;
padding-top:3px;
margin-top:0px;
}
[/code]
If i sort against any other column, the css for this first column is preserved.... so it only breaks column 0 css when i sort using column 0 sort control.
Many thanks,
Dave
I have the following:
[code][/code]
basically it makes this column (td = 0) the same colour as the rest of the page background, removing the grey/white row striping. When the row data indicates admitted=true, it toggles the visibility of the element so that a green box can be seen with a label in it. The label data is a number that is in another column (td = 30). I have this column (td = 0) sorting using col 30 as the sort source.
The sorting works great BUT the css on the column breaks and i can see the row banding now for all rows for this first cell/column. i've tried settind the "sClass": "admitted" with a css of:
[code]
table.dataTable td.admitted
{
background-color:#3a4f63;
padding-top:3px;
margin-top:0px;
}
[/code]
If i sort against any other column, the css for this first column is preserved.... so it only breaks column 0 css when i sort using column 0 sort control.
Many thanks,
Dave
This discussion has been closed.
Replies
Might it be the classes that DataTables is adding to the table to highlight the sorted column that is breaking this? You could test by adding bSortClasses : false to the initialisation. If that does fix it, you could either leave it, or we can take a look at rearranging the CSS class priorities.
Do you have a page you can link me to so I can see the issue in action?
Thanks,
Allan
cheers for the superfast reply. So i figured out the basic cause - I have this in the table initialisation:
[code]
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// if the bed column is NOT null
if (aData[30] != "") {
$(nRow).closest("tr").find("td .hideShowAdmission").toggle();
$(nRow).closest("tr").find("td .admitted_label").text(aData[30]);
}
},
[/code]
I use this to set the visibility of cell 0 in the row at the time of loading depending if there is a bed number value in column 30 of the row.
BUT it is also firing when i sort OR fnUpdate a cell unless i set fnUpdate redraw table to false. is there a better way to to look at each row at the the time of first drawing the table to run this function? that should sort out my issue.
Sorry but no example page unfortunately. I'll strip out the data and eventually get this asp.net/datatables/jQuery site online as i think my learning experience will help others locked into using asp.net.
Cheers,
Dave
Regards,
Allan