2011-03-28 12 views
0

日付範囲に基づいてjqueryデータテーブルの背景色を変更しようとしています....私は$ .fn.afnFiltering.push(.. 。)日付範囲のフィルタリングを行うには...しかし、フィルタリングされた行の色を変更する方法を理解できません....日付範囲フィルタリングに基づくjqueryデータテーブル行のCSSを変更

heres私はこれをテストし、範囲のフィルタリングが機能する日...

 //row filtering by date 
$.fn.dataTableExt.afnFiltering.push(
function (oSettings, aData, iDataIndex) { 
    var iFini = document.getElementById('dateStart').value; 
    var iFfin = document.getElementById('dateEnd').value; 
    if (iFini == "" && iFfin == "") { 
     return true; 
    } 
    else if (iFini != "" && iFfin == "") { 
     return true; 
    } 
    else if (iFini == "" && iFfin != "") { 
     return true; 
    } 
    else if (iFini != "" && iFfin != "") { 
     var sdate = new Date(); 
     var edate = new Date(); 
     var initialdt = iFini.split("/"); 
     var enddt = iFfin.split("/"); 
     var filterdt1 = aData[3].split(" "); 
     var filterdt = filterdt1[0].split("/"); 
     var msg = ""; 
     if ((Number.parseInvariant(filterdt[0]) + 1 >= Number.parseInvariant(initialdt[0]) + 1 && Number.parseInvariant(filterdt[0]) + 1 <= Number.parseInvariant(enddt[0]) + 1) && (Number.parseInvariant(filterdt[1]) >= Number.parseInvariant(initialdt[1]) && Number.parseInvariant(filterdt[1]) <= Number.parseInvariant(enddt[1])) && (Number.parseInvariant(filterdt[2]) >= Number.parseInvariant(initialdt[2]) && Number.parseInvariant(filterdt[2]) <= Number.parseInvariant(enddt[2]))) { 
      // msg = "initialdt: " + initialdt[0] + "/" + initialdt[1] + "/" + initialdt[2] + "====" + "enddt: " + enddt[0] + "/" + enddt[1] + "/" + enddt[2] + "====Filter:" + filterdt[0] + "/" + filterdt[1] + "/" + filterdt[2] + "/n"; 

       //need to change the style here...not sure how to address   
       //the individual row 

      return true; 
     } 
    } 

    return true; 
} 
); 

私も以下のようにfnDraw機能を結合しています...

$("#dateStart").keyup(function() { $dTable.fnDraw(); }); 
$("#dateStart").change(function() { $dTable.fnDraw(); }); 
$("#dateEnd").keyup(function() { $dTable.fnDraw(); }); 
$("#dateEnd").change(function() { $dTable.fnDraw(); }); 

答えて

1

iDataIndexとfnGetNodesを使用してtr要素を取得できます。

var tr = oTable.fnGetNodes(iDataIndex);
$(tr).css('background-color', '#F00');

oTableは、DataTableオブジェクトが含まれている必要があります。

var oTable = $("#myTable").dataTable({ ... });

+0

OKそれが働いていたので、私はどんなことで並べ替え、すべてのページを表示している場合...部分的に....今私は... ...最初のページだけのエントリがハイライト表示されます別の問題を持っています列は一致するエントリの残りの部分が強調表示されます。 –

+0

この簡単な例を確認してください:[http://jsfiddle.net/codigoespagueti/AHswU/1/](http://jsfiddle.net/codigoespagueti/AHswU/1/)。あなたのコードとの違いはありますか? –

関連する問題