datatables - 在函数作用于该行时更改行颜色

Question

我有一个数据表，其中包含一些数据，包括一个布尔“状态”列。

我根据此“状态”为行着色，并根据它显示用户友好的文本。

每行中还有一个按钮，用于调用函数（调用ajax调用，在服务器上执行某些操作），这可能会导致状态发生变化。在此调用之后，将重新加载表数据，并显示新状态。

由于对服务器的调用可能需要几秒钟，我想显示中间状态颜色和消息，如“等待”并将行颜色更改为黄色，然后，当重新加载数据时，颜色和文本将返回匹配状态。

这是我到目前为止所做的，缩短为仅显示必要的位：

$(document).ready(function(){
table = $('#table').dataTable(
    {
        'columns' : [ {
            title : 'Status',
            data : 'running'
        }, {
            title : 'Name',
            data : 'name'
        }, {
            title : 'Do Something',
            data : 'running'
        } ],
        'fnRowCallback' : function(row, data, dataIndex, dataIndexFull) {
            if(data.running) {
                $(row).css('background-color', '#DEF1D7');
            } else {
                $(row).css('background-color', '#F0DDDD');
            }
        },
        'columnDefs' : [{
            'targets' : 0,
            'searchable' : false,
            'orderable' : true,
            'className' : 'dt-body-center',
            'render' : function(data, type, full, meta) {
                if (data) {
                    return "Running";
                } else {
                    return "Halted";
                }
            }
        }, {
            'targets' : 2,
            'searchable' : false,
            'orderable' : false,
            'className' : 'dt-body-center',
            'render' : function(data, type, full, meta) {
                var button = document.createElement("button");
                button.innerHTML = "Do something";
                button.setAttribute("onclick", "doSomething(\'" + full.name + "\')");
                if (data) {
                    button.disabled = false;
                } else {
                    button.disabled = true;
                }
                return button.outerHTML;
            }
        } ],
    });

    loadData();
});

function loadData() {
$.ajax({
    type : 'GET',
    url : '/url/to/my/data',
    contentType : false,
    processData : false,
    data : null,
    success : function(retData) {
        table.fnClearTable();
        // Add updated data 
        table.fnAddData(retData);
        // Redraw table
        table.fnDraw();
    },
        error : function(request, status, error) {
        // Clear table 
        table.fnClearTable();
        // Redraw table
        table.fnDraw();
    }
});
}

doSomething(name){
    //do some stuff that takes some time

    //after that's done
    loadData();
 }

如何在按下按钮时调用的doSomething方法中更改行的颜色？我可以在fnRowCallback中以某种方式在行上设置id并在doSomething中使用该ID吗？

Answer 1

如下处理onclick怎么样？

$('#example tbody').on( 'click', 'button', function () {
    $(this).parents('tr').attr('style','background-color: red')
});

可能是您可以在刷新数据时绑定onclick，单击按钮，您可以获取其父tr元素并更改它的颜色。

让我知道这个是否奏效