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

Answer 1

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

由于内容是动态的而颜色变化是静态的，所以它只像您提到的那样工作一次。一种可能的解决方案是将颜色更改操作放在 DataTable Event Listener 中。 ，因此每当该事件发生时都会执行颜色更改行。

在这种情况下，您可以尝试使用 draw event :

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