jQuery DataTable - 更新值并呈现到 HTML 表

Question

我有一个 jQuery DataTable 对象，其中包含日志信息 - 应用程序在特定日期范围内记录了多少异常类型的日志消息、信息等。我想在将日志消息发送到底层数据库时更新这些值。我目前正在使用 javascript 根据 AppId 在 HTML 表中查找一个单元格，并使用新的日志总数更新 innerHTML。但是，由于并非所有应用程序都是可见的，例如如果有 15 个但表仅设置为显示 10 个条目，我想更新 DataTable 对象中的值，以便在应用程序包含在表中时这些值是正确的。

我已经尝试通过这样做来更改 DataTable 中的值

var rows = table.rows().data();
var arr = data.aaData;
for (var i = 0; i < arr.length; i++) {
        for (var r = 0; r < rows.length; r++) {
            if (arr[i].ApplicationId == rows[r].AppId) {
                if (arr[i].Debug != 0 || arr[i].Information != 0 || arr[i].Message != 0 || arr[i].Warning != 0 || arr[i].Exception != 0) {
                    //New Exception Count
                    if (arr[i].Exception !== 0) {
                        rows[r].Exception = arr[i].Exception;
                        flash(rows[r].AppId, 'Exception');
                    }
                    //New Warning Count
                    if (arr[i].Warning !== 0) {
                        rows[r].Warning = arr[i].Warning;
                        flash(rows[r].AppId, 'Warning');
                    }
                    //New Message Count
                    if (arr[i].Message !== 0) {
                        rows[r].Message = arr[i].Message;
                        flash(rows[r].AppId, 'Message');
                    }
                    //New Information Count
                    if (arr[i].Information !== 0) {
                        rows[r].Information = arr[i].Information;
                        flash(rows[r].AppId, 'Information');
                    }
                    //New Debug Count
                    if (arr[i].Debug !== 0) {
                        rows[r].Debug = arr[i].Debug;
                        flash(rows[r].AppId, 'Debug');
                    }
                }
            }
        }
    }
    table.draw();

其中data.aaData 是从控制器方法返回的 JSON 格式数据。 将rows 记录到控制台我可以看到DataTable 对象中的值已更新，但在table.draw() 调用期间这些新值并未呈现到HTML 表中。

那么有没有人有一个标准的方法来更改 DataTable 中的值？例如，我尝试过使用table.cell(r, 5).data(someNewValue);，但这似乎会产生一些不可靠的结果。

Answer 1

奇怪的是，table.cell(r, 5).data(someNewValue) 的尝试不起作用。无论如何，你当然可以反过来。这里的关键字是使用invalidate()。如果我们有一张桌子：

<table id="example"></table>

还有一些 JSON 格式的数据

var data = [
    { "name" : "david", "lastname" : "konrad" }
];

并像这样初始化数据表

var table = $('#example').DataTable({ 
    data : data,
    columns : [
        { data : "name", title :'name' },
        { data : "lastname", title : 'last name' }
    ]
})

然后您可以通过这种方式更新data JSON 来更改数据表的内容：

data[0].name = 'sam';
data[0].lastname = 'gregory';

table.row(0).invalidate().draw();

对于特定的行，或者只是

table.rows().invalidate().draw();

对于整个数据集。

演示 -> http://jsfiddle.net/vvzvxarf/

---

更新。您可以使用 AJAX 数据源执行与上述完全相同的操作：

$('#example').DataTable( {
  ajax: {
    url: "someUrl",
    dataSrc: function(json) {
       //manipulate the data JSON as you wish
       //in this case, you dont need to invalidate() or draw()
       //...
       return json.data;
    }
})

---

更新二。 在表渲染之后操作 AJAX 数据。只需将响应 JSON “复制”到您以后可以操作的变量中。变量只是一个引用。一个小例子：

var data;
var table = $("#example").DataTable({
    ajax : {
        url : 'data.json',
        dataSrc : function(json) {
            data = json.data;
            return json.data; 
        }
    },
    columns : [
        { data : 'first_name' }
    ]
})

setTimeout(function() {
    data[0].first_name = 'sam';
    table.row(0).invalidate().draw();
}, 100)

结果与我的第一个示例完全相同。