【问题标题】:change css of a jquery datatable row based on date range filtering根据日期范围过滤更改 jquery 数据表行的 css
【发布时间】:2011-03-28 19:41:38
【问题描述】:

我正在尝试根据日期范围更改 jquery 数据表的背景颜色....我尝试使用 $.fn.afnFiltering.push(...) 进行日期范围过滤...但是无法弄清楚如何更改过滤行的颜色....

这是我用来进行过滤的代码...我对此进行了测试,并且日期范围过滤有效...

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

【问题讨论】:

    标签: jquery css datatables


    【解决方案1】:

    您可以使用 iDataIndex 和 fnGetNodes 获取 tr 元素。

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

    oTable 必须包含 dataTable 对象。

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

    【讨论】:

    • 好的,这样就可以了......部分......现在我有另一个问题......只有第一页条目被突出显示......如果我查看所有页面然后按任何排序列的其余匹配条目被突出显示....什么给出了??
    • 检查这个简单的例子:http://jsfiddle.net/codigoespagueti/AHswU/1/。你的代码有什么不同吗?
    猜你喜欢
    • 2020-02-15
    • 2017-06-25
    • 1970-01-01
    • 2021-01-10
    • 2016-11-25
    • 1970-01-01
    • 2015-10-02
    • 1970-01-01
    • 2020-03-09
    相关资源
    最近更新 更多