Having some troubles and hoping someone can help point me in a direction. I've split out the scripts to help myself, as i'm a newbie. I'm trying to highlight certain values in certain rows based on the value of the field.
I can't get it to highlight the actual fields in the table, only the headers. Could this be an issue with the server side processing or maybe the highlight script runs before the table is populated?
Script for the download button integration for Datatables:
<script>
TableTools.BUTTONS.download = {
"sAction": "text",
"sTag": "default",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "<br>",
"sToolTip": "",
"sButtonClass": "DTTT_button_text",
"sButtonClassHover": "DTTT_button_text_hover",
"sButtonText": "Download",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"sDiv": "",
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function( nButton, oConfig ) {
var oParams = this.s.dt.oApi._fnAjaxParameters( this.s.dt );
var iframe = document.createElement('iframe');
iframe.style.height = "0px";
iframe.style.width = "0px";
iframe.src = oConfig.sUrl+"?"+$.param(oParams);
document.body.appendChild( iframe );
},
"fnSelect": null,
"fnComplete": null,
"fnInit": null
};
</script>
Script to populate table:
<script>
$('#cluster_dataTables').dataTable( {
"bprocessing": true,
"bserverSide": true,
"sAjaxSource": "../scripts/data.php",
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [{
"sExtends": "download",
"sButtonText": "Download CSV",
"sUrl": "../scripts/data_csv.php"
}]
},
} );
</script>
Script to do the highlighting:
<script>
$('#cluster_dataTables td:nth-child(2)').highlight('True'); //table test
$('#cluster_dataTables th:nth-child(2)').highlight('Enabled'); //head test
</script>
Check if the .highlight
CSS class is defined, be sure that highlighted text actual gets hightlighted :)
When using serverside processing, you must call highlight
each time the table is redrawn. Eg add this to your dataTables initialisation :
..
fnDrawCallback : function() {
$('#cluster_dataTables td:nth-child(2)').highlight('internet'); //table test
$('#cluster_dataTables th:nth-child(2)').highlight('browser'); //head test
}
see this demo -> http://jsfiddle.net/r0nn8orv/ - try clicking through the pages. I have included tabletools in the example, even though the focus on tabletools in the OP and answer only confuses :)