插入新行后重新应用dynatable

时间:2015-08-14 19:47:43

标签: jquery rest dynatable

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

我正在使用这些新行更新表:

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

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

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

dynatable table

这是我的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
        }
    }               
});

}

1 个答案:

答案 0 :(得分:0)

您的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();  
}