I have a datatable set up where each row in the table has an ID set on it in the format of “supplier_X”. This is set in the PHP page being requested via AJAX.

I have an object that I want to iterate through that contains a list of these row IDs where I’d like to add a class to that row in the table.

Using the answer from this question, I’ve tried the following but it’s just not working:

let suppliertable = $('#suppliertable').DataTable({
    ajax: {
        type: 'POST',
        url: '/ajax/get_supplier_data.php'
    },
    rowId: 'rowId',
    columns: [
                {data: 'supplier', className: 'supplier'},
                {data: 'q1', className: 'q1'},
                {data: 'q2', className: 'q2'},
                {data: 'q3', className: 'q3'},
                {data: 'q4', className: 'q4'},
            ]
});

const supplier_amber = {
   q1: ["supplier_1", "supplier_3"],
   q2: ["supplier_1"],
   q3: ["supplier_2", "supplier_4"],
   q4: ["supplier_1", "supplier_2", "supplier_3"]
};

let supp_id_str = "";
Object.entries(supplier_amber).forEach(([qtr, supplier_ids]) => {
    supp_id_str = String(supplier_ids); //converting it to a String as it's not letting me split without it
    supp_id_split = supp_id_str.split(","); //before this, supplier_ids was showing like "supplier_id_1,supplier_id_3,supplier_id_5,supplier_id_7"
    for (i = 0; i <= supp_id_split.length; i++) {
        suppliertable.row("#" + supp_id_split[i]).nodes().to$().addClass("amber_" + qtr);
    }
});

What I expect to see is each row with those IDs having the extra classes, e.g.:

<tr id="supplier_1" class="odd amber_1 amber_2 amber_4">
    <td class="supplier sorting_1">SUPPLIER 1</td>
    <td class="q1">£100</td>
    <td class="q2">£55</td>
    <td class="q3">£0</td>
    <td class="q4">£0</td>
</tr>
<tr id="supplier_2" class="even amber_3 amber_4">
    <td class="supplier">SUPPLIER 2</td>
    <td class="q1">£66</td>
    <td class="q2">£33</td>
    <td class="q3">£10</td>
    <td class="q4">£0</td>
</tr>
<tr id="supplier_3" class="odd amber_1 amber_4">
    <td class="supplier">SUPPLIER 3</td>
    <td class="q1">£10</td>
    <td class="q2">£0</td>
    <td class="q3">£0</td>
    <td class="q4">£0</td>
</tr>
<tr id="supplier_4" class="even amber_3">
    <td class="supplier">SUPPLIER 4</td>
    <td class="q1">£44</td>
    <td class="q2">£88</td>
    <td class="q3">£5</td>
    <td class="q4">£0</td>
</tr>

However, it doesn’t add any class to any row and what I actually get is:

<tr id="supplier_1" class="odd">
    <td class="supplier sorting_1">SUPPLIER 1</td>
    <td class="q1">£100</td>
    <td class="q2">£55</td>
    <td class="q3">£0</td>
    <td class="q4">£0</td>
</tr>
<tr id="supplier_2" class="even">
    <td class="supplier">SUPPLIER 2</td>
    <td class="q1">£66</td>
    <td class="q2">£33</td>
    <td class="q3">£10</td>
    <td class="q4">£0</td>
</tr>
<tr id="supplier_3" class="odd">
    <td class="supplier">SUPPLIER 3</td>
    <td class="q1">£10</td>
    <td class="q2">£0</td>
    <td class="q3">£0</td>
    <td class="q4">£0</td>
</tr>
<tr id="supplier_4" class="even">
    <td class="supplier">SUPPLIER 4</td>
    <td class="q1">£44</td>
    <td class="q2">£88</td>
    <td class="q3">£5</td>
    <td class="q4">£0</td>
</tr>

As I’m getting the data from a PHP page via AJAX, if there’s a way to specify the extra class names there per row (like I do for the rowId), I’d be more than happy doing it there rather than in JS…