javascript - 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 是从 Controller 方法返回的 JSON 格式数据。 将 rows 记录到控制台，我可以看到 DataTable 对象中的值已更新，但这些新值不会在 table.draw() 期间呈现给 HTML 表打电话。

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

Answer 1

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

<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 来更改 dataTable 的内容:

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)

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