dynamic server-side change cell (TD) background color (class)
dynamic server-side change cell (TD) background color (class)
Hello everybody,
First of all, I really like DataTables, it's a great tool!
I use it for a grid with server-side processing. I managed to customize it with many features just by reading the examples and the forum, but I got stuck with changing the cell background color according to the value of the cell.
Example: I have an ErrorCode column for which I need different background color of the cell of each row depending on the error code. 0 - 5 = red, 5 - 10 = orange, 10 - 15 = yellow etc. So I need the background color on the TD cell, not on the TR row for which I found several solutions (including DT_RowId and DT_RowClass).
I read on the forum how somebody did it directly from the PHP code, but I didn't understand how (for the TBODY there is only the TD colspan=cols_no, how can you put the condition before the javascript draws the table with the results?). Therefore I tried to have the formatting directly from the SQL query, like SELECT '' || error_code || '' as ERR_COL from table, but whatever I tried in the applyError3 class the DIV cannot expand to 100% height in all browsers to match the parent TD size (height needs a fix height of the parent TD, which I don't want, and position doesn't apply to TD - actually you can do it but not for Firefox). Also when trying several JS solutions BEFORE the table was generated (outside of the fnDrawCallback function) I got inconsistent results (some of them worked only in Firefox).
So the only solution was to use JavaScript but as less as possible and I came up with this solution:
- in the query: SELECT '' || error_code || '' as ERR_COL from table
- in the fnDrawCallback():
$('span[name=dtChangeClass]').each( function(index){
$(this).parent().addClass($(this).attr("class"));
});
Which works fine in all browsers. Please note that in the query there is a decode/case, of course, where the conditions for applying the class are, and I used SPAN instead of DIV so jQuery will parse less nodes and it will be faster (usually you have much more divs than spans in a page).
Please add your solutions here if you have others.
First of all, I really like DataTables, it's a great tool!
I use it for a grid with server-side processing. I managed to customize it with many features just by reading the examples and the forum, but I got stuck with changing the cell background color according to the value of the cell.
Example: I have an ErrorCode column for which I need different background color of the cell of each row depending on the error code. 0 - 5 = red, 5 - 10 = orange, 10 - 15 = yellow etc. So I need the background color on the TD cell, not on the TR row for which I found several solutions (including DT_RowId and DT_RowClass).
I read on the forum how somebody did it directly from the PHP code, but I didn't understand how (for the TBODY there is only the TD colspan=cols_no, how can you put the condition before the javascript draws the table with the results?). Therefore I tried to have the formatting directly from the SQL query, like SELECT '' || error_code || '' as ERR_COL from table, but whatever I tried in the applyError3 class the DIV cannot expand to 100% height in all browsers to match the parent TD size (height needs a fix height of the parent TD, which I don't want, and position doesn't apply to TD - actually you can do it but not for Firefox). Also when trying several JS solutions BEFORE the table was generated (outside of the fnDrawCallback function) I got inconsistent results (some of them worked only in Firefox).
So the only solution was to use JavaScript but as less as possible and I came up with this solution:
- in the query: SELECT '' || error_code || '' as ERR_COL from table
- in the fnDrawCallback():
$('span[name=dtChangeClass]').each( function(index){
$(this).parent().addClass($(this).attr("class"));
});
Which works fine in all browsers. Please note that in the query there is a decode/case, of course, where the conditions for applying the class are, and I used SPAN instead of DIV so jQuery will parse less nodes and it will be faster (usually you have much more divs than spans in a page).
Please add your solutions here if you have others.
This discussion has been closed.
Replies