how to highlight rows based on cell content in a server side processing environment?
how to highlight rows based on cell content in a server side processing environment?
rw1
Posts: 42Questions: 0Answers: 0
hello,
in an environment using server side processing, i want to highlight a row based on the content of one cell.
using the three different css 'grades' that are in the demo (gradeA, gradeC, gradeX) i want there to be three color options depending on the content of the cell, for example:
- a cell with the content 'option1' has a row color controlled by tr class gradeA
- a cell with the content 'option2' has a row color controlled by tr class gradeC
i can see people have found answers in this thread (http://datatables.net/forums/discussion/679/highlighting-rows/p1) to achieve this but unfortunately i can't understand them (i don't understand the syntax and code i am looking at).
so i think there are three files i have to modify to get these results:
- the css files (using the ones included in the demo ie demo_page.css and demo_table_jui.css)
- the html file (using the one in the demo ie examples/server_side/server_side.html)
in the html document's head i have:
[code]
@import "https://xxxx.com/xxxx/media/css/demo_page.css";
@import "https://xxxx.com/xxxx/media/css/demo_table_jui.css";
@import "https://xxxx.com/xxxx/examples/examples_support/themes/ui-darkness/jquery-ui-1.8.22.custom.css";
$(document).ready(function() {
$('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "path/examples/server_side/scripts/server_processing.php",
"aLengthMenu": [[15, 30, 45, -1], [15, 30, 45, "All"]],
"iDisplayLength": 15,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if(aData[0].search("option1")>-1){
$(nRow).addClass("gradeA");
}
return nRow;
}
} );
} );
[/code]
and the table is displaying without any rows highlighted unfortunately.
can anyone please tell me the code i have to use to get this to work?
thank you!
ps i don't know what aData stands for - does that mean it is searching all rows and columns for the 'option1' phrase?
thank you!
in an environment using server side processing, i want to highlight a row based on the content of one cell.
using the three different css 'grades' that are in the demo (gradeA, gradeC, gradeX) i want there to be three color options depending on the content of the cell, for example:
- a cell with the content 'option1' has a row color controlled by tr class gradeA
- a cell with the content 'option2' has a row color controlled by tr class gradeC
i can see people have found answers in this thread (http://datatables.net/forums/discussion/679/highlighting-rows/p1) to achieve this but unfortunately i can't understand them (i don't understand the syntax and code i am looking at).
so i think there are three files i have to modify to get these results:
- the css files (using the ones included in the demo ie demo_page.css and demo_table_jui.css)
- the html file (using the one in the demo ie examples/server_side/server_side.html)
in the html document's head i have:
[code]
@import "https://xxxx.com/xxxx/media/css/demo_page.css";
@import "https://xxxx.com/xxxx/media/css/demo_table_jui.css";
@import "https://xxxx.com/xxxx/examples/examples_support/themes/ui-darkness/jquery-ui-1.8.22.custom.css";
$(document).ready(function() {
$('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "path/examples/server_side/scripts/server_processing.php",
"aLengthMenu": [[15, 30, 45, -1], [15, 30, 45, "All"]],
"iDisplayLength": 15,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if(aData[0].search("option1")>-1){
$(nRow).addClass("gradeA");
}
return nRow;
}
} );
} );
[/code]
and the table is displaying without any rows highlighted unfortunately.
can anyone please tell me the code i have to use to get this to work?
thank you!
ps i don't know what aData stands for - does that mean it is searching all rows and columns for the 'option1' phrase?
thank you!
This discussion has been closed.
Replies
http://datatables.net/release-datatables/examples/server_side/ids.html
so i have tried using the script given in that example and am using this initialisation code:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "path/examples/server_side/scripts/id.php",
"aLengthMenu": [[15, 30, 45, -1], [15, 30, 45, "All"]],
"iDisplayLength": 15
} );
} );
[/code]
my question is:
how do i apply a class to a row using this example?
thank you!