jQuery DataTable - 更新值并呈现为 HTML table

Question

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

我试过通过做这样的事情来改变 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 table。

那么有没有人有更改 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 来更改数据表的内容：

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 数据在 table 呈现之后。只需 "copy" 对您稍后可以操作的变量的响应 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)

结果和我的第一个例子完全一样。

jQuery DataTable - 更新值并呈现为 HTML table

jQuery DataTable - Update values and render to HTML table

javascript

datatables