Question

i am trying to change the background color of a jquery datatable based on a date range….i tried to use $.fn.afnFiltering.push(…) to do the date range filtering…but cant figure out how to change the color of the filtered rows….

heres the code i am using to do the filtering…i tested this and the date range filtering works…

        //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;
}
);

i am also binding the fnDraw function as below…

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

Answer 1

You can get the tr element using iDataIndex and fnGetNodes.


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


oTable must contain the dataTable object.


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