jQuery DataTable-更新值並將其呈現為HTML表

Question

我有一個jQuery DataTable對象，它保存日志信息-應用程序在特定日期范圍內記錄了Exception，信息等類型的日志消息。 我想在日志消息發送到基礎數據庫時更新這些值。 我目前正在使用JavaScript在基於AppId的HTML表中查找單元格，並使用新的日志總數更新innerHTML。 但是，由於並非所有應用程序都可見，例如，如果有15個應用程序，但該表僅設置為顯示10個條目，我想更新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.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" }
];

並像這樣初始化dataTable

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)

結果與我的第一個示例完全相同。