dataTables分页与Ajax内容和行颜色不起作用

Question

问题是我动态地向表格添加内容，并使用以下方式强制更改颜色：

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

这在第一页上非常好用，但在其他页面上失效了。请告诉我该怎么办。

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);
                    });
                }
            });
        });
    },
});

- morissette

Answer 1

我知道这是一个老问题，但我想留下我的答案至少作为FTR：

由于内容是动态的，颜色更改是静态的，它只起作用一次，就像你所提到的。一个可能的解决方案是将颜色更改操作放入DataTable事件监听器中，因此每当该事件发生时，颜色更改行都会被执行。

在这种情况下，您可以尝试使用绘制事件：

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

- Alejandro Veltri