DataTableの行がハイライト表示されない

Question

データテーブルがあり、すべての情報が正しく表示され、行の強調表示のコードを追加するまで正常に動作します。

はまた、私は、私は、問題はおそらく、私は一緒にjqueryのの二つの項目を配置している方法だと思いますが、私、私はCDNのファイルにリンクされているにもかかわらず、整形のすべてがなくなったJSFiddleに私とまったく同じコードを追加したとき取得し、他のいくつかの問題

JS Fiddle

CSS

table.dataTable tr.highlight { 
    background-color: lime; 
    } 

Javascriptのコード

があった場合、JSフィドルABDからのエラーはそれほど不思議に思っておりません

$(document).ready(function() { 
$('#example').dataTable({ 
"aoColumns": [ 
    null, 
    null, 
    null, 
    null, 
    null, 
    null, 
    { "sType": "date-uk" }, 
    { "sType": "date-uk" }, 
    { "sType": "date-uk" }, 
    null, 
    null, 
    null, 
    null, 
    null 
    ] 
    }); 
    }); 

    jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
    "date-uk-pre": function (a) { 
    var ukDatea = a.split('/'); 
    return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; 
    }, 

    "date-uk-asc": function (a, b) { 
    return ((a < b) ? -1 : ((a > b) ? 1 : 0)); 
    }, 

"date-uk-desc": function (a, b) { 
    return ((a < b) ? 1 : ((a > b) ? -1 : 0)); 
    } 

    }); 
    fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
    if (aData[3] == "PV PLUS") { 
     $(nRow).addClass('highlight'); 
     } 
    } 

HTML表コード

  <table id="example"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Address</th> 
        <th>Telephone</th> 
        <th>Product</th> 
        <th>Amount</th> 
        <th>Sales rep</th> 
        <th>Survey Date</th> 
        <th>Install Date</th> 
        <th>Sales Date</th> 
        <th>Payment</th> 
        <th>Notes</th> 
        <th>Month</th> 
        <th>Delete</th> 
       </tr> 
      </thead> 
      <tfoot> 
       <tr> 
        <th>Name</th> 
        <th>Address</th> 
        <th>Telephone</th> 
        <th>Product</th> 
        <th>Amount</th> 
        <th>Sales rep</th> 
        <th>Survey Date</th> 
        <th>Install Date</th> 
        <th>Sales Date</th> 
        <th>Payment</th> 
        <th>Notes</th> 
        <th>Month</th> 
        <th>Delete</th> 
       </tr> 
      </tfoot> 
      <tbody> 
       <tr> 
         <td>Lee Jones</td> 
         <td>32 road street</td> 
         <td>01268 413657</td> 
         <td>PV PLUS</td> 
         <td>£ 12,000</td> 
         <td>John</td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
        </tr> 
        <tr> 
         <td>Simon Walker</td> 
         <td>34 road street</td> 
         <td>01268 413857</td> 
         <td>PV PLUS</td> 
         <td>£ 18,000</td> 
         <td>John</td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
        </tr> 
      </tbody> 

Answer 1

あなたの例（行方不明のjQuery、スタイル）といくつかの問題があります。しかし、行が強調表示されなかった主な理由は、!importantディレクティブを使用する必要があるということです。

table.dataTable tr.highlight, 
table.dataTable tr.highlight td { 
    background-color: lime !important; 
} 

コードとデモンストレーションについては、updated jsFiddleを参照してください。