2014-09-04 93 views
1

有一些麻煩,希望有人能幫助指向我的方向。我已經分開了腳本來幫助自己,因爲我是一個新手。我試圖根據字段的值強調某些行中的某些值。JQuery Datatables + jquery.highlight

我不能讓它突出顯示錶中的實際字段,只有標題。這可能是服務器端處理的問題,或者在表填充之前運行突出顯示腳本?

腳本的下載按鈕集成數據表

<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> 
$('#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> 
$('#cluster_dataTables td:nth-child(2)').highlight('True'); //table test 
$('#cluster_dataTables th:nth-child(2)').highlight('Enabled'); //head test 
</script> 

回答

1

檢查是否.highlight CSS類定義,確保突出顯示文本實際被在突出顯示:)

當使用服務器端的處理,你必須調用highlight每一次表,重繪。例如,添加到您的數據表初始化:

.. 
fnDrawCallback : function() { 
    $('#cluster_dataTables td:nth-child(2)').highlight('internet'); //table test 
    $('#cluster_dataTables th:nth-child(2)').highlight('browser'); //head test   
} 

看到這個演示 - >http://jsfiddle.net/r0nn8orv/ - 請嘗試點擊的頁面。我在示例中包含了桌面工具,儘管關注OP中的桌面工具並且答案只是令人困惑:)

+0

非常感謝! – solar411 2014-09-05 15:11:49