JQuery Datatables + jquery.highlight

Question

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>

davidkonrad · Accepted Answer · 2014-09-05 14:26:53Z

1

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 :)

answered Sep 5, 2014 at 14:26

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Datatables + jquery.highlight

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related