dataTables Ajax content and row color not working with pagination

Question

Issue is I dynamically add content to a table and force the color using:

$("#main_dash tbody tr:nth-child(" + index + ")").css("background-color", item['color']);

This works great on the first page but is lost on any other pages. Please let me know what I can do.

HTML:

Employee: <input type="text" id="dash_view" name="name"/><br/>
<div id="dashboard_viewer">
<table id="main_dash">
<thead>
<tr class="ui-widget-header">
   <th></th>
   <th>Date</th>
   <th>Type</th>
   <th>Regarding</th>
   <th>Submitted By</th>
   <th>Review</th>
   <th>Assign</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

JS:

    var mainTable = $("#main_dash").dataTable({
    "oLanguage": {
        "sEmptyTable": "There are currently no groom logs to be assigned.",
    },
    "sPaginationType": "full_numbers",
    "iDisplayLength": 10,
    "aaSorting": [
        [1, "asc"]
    ],
});

$("#dash_view").autocomplete({
    source: '/process/get_users.php',
    minLength: 2,
    select: function (event, ui) {
        var name = ui.item.value;
        var uid = ui.item.id;
        var query = "func=dash_view&uid=" + uid;
        ajaxRequest(query, function (data) {
            $("h3").text(name + "'s Dashboard");
            mainTable.fnClearTable(0);
            mainTable.fnDraw();
            data = $.parseJSON(data);
            $.each(data, function (i, item) {
                var index = mainTable.fnAddData([
                    item['flagged'],
                    item['date'],
                    item['type'],
                    item['regarding'],
                    item['submitted'],
                    "<button class='button button-blue review_item'>Review</button>",
                    '<span class="groom_id hidden">' + item['groom_id'] + '</span><input type="text" class="user_list"/>',
                ]);
                ++index;
                $("#main_dash tbody tr:nth-child(" + index + ")").css("background-color", item['color']);
            });
            $("#dashboard_viewer").show("slide", {
                direction: "up"
            }, 1000);
            $(".user_list").autocomplete({
                source: '/process/get_users_access.php',
                minLength: 2,
                select: function (event, ui) {
                    var row = $(this).closest('tr')[0];
                    var groom = $(this).parent().children("span:first").text();
                    var name = ui.item.value;
                    var aid = $("#aid").text();
                    mainTable.fnDeleteRow(row);
                    var query = "func=assign_groom&groom_id=" + groom + "&name=" + name + "&aid=" + aid;
                    ajaxRequest(query, function (data) {
                        successMsg('Assigned groom ' + groom + ' to ' + name);
                    });
                }
            });
        });
    },
});

Answer 1

I know this is an old question but I'd like to leave my answer at least FTR:

As the content is dynamic and the color change static, it works just once as you mention. A possible solution is to place the color-change action inside an DataTable Event Listener , so the color-change line is executed whenever that event occurs.

In this case you could try with the draw event:

$('#main_dash').on( 'draw.dt', function () {
    $("#main_dash tbody tr:nth-child(" + index + ")").css("background-color", item['color']);
} );