datatable createdRow applying background color for all rows despite conditions set on which rows to apply

Question

Im trying to set background colors for datatable rows depending on the data returned from the server.

I fetch the data dynamically through ajax and it displays successfully on the table, but the color applies to all rows, even when the other if conditions are met.

Heres my code

"createdRow": function(row, data, index) {
    console.log(data[0]);
    if ( data[0] = '1403') {
        $(row).css('background-color', 'blue');
    } else if (data[0] = '1400'){
        $(row).css('background-color', 'yellow');
    } else {
        $(row).css('background-color', 'white');
    }
},

This instead, makes all rows blue. Even when only 1 row contains 1403

Answer 1

If your function works well, there are still some logical errors / best writing practices.

Here is the new code that I would propose:

"createdRow" : function(row, data, index) {
    console.log(data[0]);

    if (data[0] === '1403') {
        $(row).css('background-color', 'blue');
    } else if (data[0] === '1400') {
        $(row).css('background-color', 'yellow');
    } else {
        $(row).css('background-color', 'white');
    }
},

Explanation:

Your previous code did not check if data[0] was equal to '1403' or '1400' , but it set the value '1403' or '1400' to data[0] .

As a reminder :

The = operator assigns a value to a variable.

The == operator compares the values of two variables.

The === operator compares the values and types of two variables.

In your example, 1400 or 1403 will be of type string, so you can make a strict comparison by asking to compare the value (1400 or 1403) and its type (string) using the === operator.

To illustrate :

1400 = '1400' would return an error in the console because it is not possible to assign a value to another non-variable value.

1400 == '1400' would return true, because the values are the same.

1400 === '1400' would return false, because the values are the same but not their types.

Another way to write the function would have been to use a switch. I'll let you look at it here https://www.w3schools.com/js/js_switch.asp

The function would be:

"createdRow" : function(row, data, index) {
    console.log(data[0]);

    switch (data[0]) {
        case '1403':
            $(row).css('background-color', 'blue');
            break;
        case '1400':
            $(row).css('background-color', 'yellow');
            break;
       default:
           $(row).css('background-color', 'white');
    }
},

This writing could be clearer and has the advantage of not repeating data[0] === for all the checks.