jquery - 插入新行后重新应用可动态化

Question

我有一个提供 SSE 资源的 RESTful 服务。我每 3 秒更新一次 HTML 表格。我正在使用 dynatable 。当添加新行时，SSE 会通知客户端，因此会更新表。

我正在用这些新行更新一个表：

$('#mytable tr:first').after(newRows);

但 dynatable 并未应用于这些新行。我读到“在我们调用 process() 之前，Dynatable 不会更新 DOM 中的表”。所以我尝试在插入新行后调用 dynatable.process() ，但它不起作用。

这是我的桌子。看前两行。未应用样式、斑马和格式化程序。

这是我的javascript代码：

if(typeof(EventSource)!=="undefined") {    

    var source = new EventSource("SOME_URL/sse");   

    source.onmessage = function(e) {            
        if(e.data) {              

           /* In the CrunchifyTableView method, I'm putting the json result indo table
           rows. I'm doing this because if I pass json directly to dynatable, I'm not
           able to styling some columns, like "Alerta" column (see image).*/
           var newRows = CrunchifyTableView(e.data, "registers");  

            $('#registers tr:first').after(newRows);

            // TODO
            // Update dynatable
           applyDynaTable(); // I tried reload the dynatable but it's not working
        }
    };

}
else {    
    // No support
} 


function applyDynatable() { 

$('#registers').dynatable({
    features: {
        paginate: true,
        search: false,
        recordCount: true,
        perPageSelect: false            
    },
    writers: {
        'dataEhora': function(record) {
            return formatDate(record.dataEhora); // Date formater
        }
    }               
});

}

Answer 1

你的applyDynatable功能应该是这样的：

function applyDynatable() { 
 var dynatable = $('#registers').dynatable({
 features: {
    paginate: true,
    search: false,
    recordCount: true,
    perPageSelect: false            
 },
 writers: {
    'dataEhora': function(record) {
        return formatDate(record.dataEhora); // Date formater
    }
 }).data("dynatable");
 dynatable.process();  
}