如何在Javascript源数据中使用(添加)行创建的回调

时间:2016-05-14 23:51:52

标签: javascript jquery html datatables

我用jquery.dataTable创建了一个表:

var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
    [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
];

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

我想使用Row创建的回调来突出显示超过$ 150000的薪水。我怎样才能做到这一点?

2 个答案:

答案 0 :(得分:1)

您可以使用此代码:

首先,将,和符号$替换为parse to float值。 其次,比较结果并添加标记<b>

$('#example').DataTable( {
    data: dataSet,
    columns: [
        { title: "Name" },
        { title: "Position" },
        { title: "Office" },
        { title: "Extn." },
        { title: "Start date" },
        { title: "Salary",
        "render": function ( data, type, row ) {
                var salary;
                salary = parseFloat(data.replace(',','').replace('$','')); 
                console.log(salary);
                if (salary > 150000){
                   return "<b>" + data + "</b>";
                }else{
                   return data;
                }

            },
         }
    ],

} );

结果:https://jsfiddle.net/cmedina/7kfmyw6x/52/

答案 1 :(得分:1)

另一种选择(虽然@ CMedina的方法有效)是使用rowCallback,它允许你改变整行并突出显示它。像这样:

"rowCallback": function(row, data, index){
    if(numeral().unformat(data[5]) > 150000){
        $(row).addClass("highlight");
        $('td:eq(5)', row).html("<b>" + data[5] + "</b>");
    }
}

我已经包含了numeral.js来简化解析。工作JSFiddle