Datatables Updating Only Rows Without Reloading Table

BACKGROUND: I have a small jquery app that contains widgets. There are 2 types of widgets in this app and they are counter widgets and grid widgets. For grid widgets i am utilizin

Solution 1:

Updating the table every 3 seconds could cause performance issues, especially if you have lots of rows!

If you want to do it, you can iterate through the rows in the update XML and then write the values to the individual cells in the table.

DEMO

In my example, the table is already there with row ids as data attributes on the row element. I am updating once on a button click instead of every 3 seconds on a timer, but the parsing would be the same.

$("#update").on("click", function(){
    var $trows= $('#example tbody tr');       
    var xmlDoc = $.parseXML( xmlstring );
    var $xml = $( xmlDoc );  

    $xml.find("row").each(function(index){            
        var id = $(this).prop("id");            
        var $cells = $(this).find("cell");
        var c1 = $cells.eq(0).text();
        var c2 = $cells.eq(1).text();
        var c3 = $cells.eq(2).text();

        //get row in table with this id
        var $rowtd = $('#example tbody [data-id=' + id + '] td');
        $rowtd.eq(0).text(c1);
        $rowtd.eq(1).text(c2);
        $rowtd.eq(2).text(c3);
    });  
});

The code loads the XML string into an XmlDocument and then creates a jQuery object from the document. Next I iterate through all the Xml Nodes called "row" getting the id and the 3 cell texts. Then I find the row in the existing table with the same Id and write the texts into the existind TDs in the row.

You will need to test the performance of this given the normal number of rows you have and the types of devices you plan to support.