Re-apply dynatable after new rows inserted

Question

I have a RESTful service that provides an SSE resource. I'm updating a HTML table every 3 seconds. I'm using dynatable on it. When new rows are added, the SSE inform the client, so the table is updated.

I'm updating a table with these new rows:

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

But the dynatable is not been applied to these new rows. I read that "Dynatable won't update the table in the DOM until we call process()". So I tried to call dynatable.process() after insert the new rows, but it doesn't work.

Here is my table. Look at the first two rows. The style, zebra and formatter was not applied.

Here is my javascript code:

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

Your applyDynatable function should be like this:

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