数据表 - 当函数作用于该行

时间:2018-02-28 21:09:22

标签: javascript datatables

我有一个数据表,里面有一些数据,包括一个布尔状态'柱。

我根据此状态'为行着色,并根据它显示用户友好的文字。

每一行中都有一个按钮,用于调用一个函数(调用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吗?

1 个答案:

答案 0 :(得分:2)

如下处理onclick怎么样?

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

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

让我知道这是否有效