Ajax content and row color not working with pagination

morissette

Hello world.

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.


Code below:

HTML:
[code]
Employee:







Date
Type
Regarding
Submitted By
Review
Assign






[/code]

JS:
[code]
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'],
"Review",
'' + item['groom_id'] + '',
]);
++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);
});
}
});
});
},
});
[/code]