【问题标题】:JQuery Datatables + jquery.highlightJQuery 数据表 + jquery.highlight
【发布时间】:2014-10-29 20:47:39
【问题描述】:

遇到一些麻烦,希望有人能帮助我指明方向。我已经拆分脚本来帮助自己,因为我是新手。我试图根据字段的值突出显示某些行中的某些值。

我无法突出显示表中的实际字段,只有标题。这可能是服务器端处理的问题,还是高亮脚本在填充表格之前运行?

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>
$('#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>

【问题讨论】:

    标签: jquery datatables jquery-datatables highlight highlighting


    【解决方案1】:

    检查.highlight CSS 类是否已定义,确保突出显示的文本实际被突出显示:)

    使用服务器端处理时,每次重绘表格时都必须调用highlight。例如,将此添加到您的 dataTables 初始化中:

    ..
    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/ - 尝试点击页面。我在示例中包含了 tabletools,即使在 OP 和答案中对 tabletools 的关注只会让人困惑:)

    【讨论】:

      猜你喜欢
      • 2012-06-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-12-07
      相关资源
      最近更新 更多