user3275043 user3275043 - 6 months ago 34
Javascript Question

How to use (add) Row created callback in Javascript sourced data

I have created a table with 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" }
]
} );
} );


I want to use Row created callback to highlight the salary more than $150000. How can I do this?

Answer

You can use this code:

First, replace , and the symbol $ for parse to float value. Second compare the result and add tag <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;
                }

            },
         }
    ],

} );

Result: https://jsfiddle.net/cmedina/7kfmyw6x/52/

Comments