Update Datatable from XML

by Erik Zanker

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/demo_table.css">
<table style="width: 100%;" id="example">
    <thead>
        <tr>
            <th>Player</th>
            <th>State</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr data-id="1">
            <td>Lebron King James</td>
            <td>Best Mode</td>
            <td>45</td>
        </tr>
        <tr data-id="2">
            <td>Joe Blow</td>
            <td>Best Mode</td>
            <td>55</td>
        </tr>
        <tr data-id="3">
            <td>Jane Dow</td>
            <td>Best Mode</td>
            <td>23</td>
        </tr>
    
    </tbody>
</table>
<div style="clear: both;"></div>
<div style="margin-top: 24px;">
<button id="update">Update From XML</button>
</div>

JavaScript

var xmlstring = '<?xml version="1.0" encoding="UTF-8"?>';
xmlstring += '<rows><head>';
xmlstring += '<column width="55" type="ro" align="left" sort="str">Player</column>';
xmlstring += ' <column width="55" type="ro" align="left" sort="str">State</column>';
xmlstring += ' <column width="55" type="ro" align="left" sort="str">Points</column>';
xmlstring += '</head>';
xmlstring += '<row id="1"><cell>Lebron King James</cell><cell>Best Mode</cell>            <cell>51</cell></row>';
xmlstring += '<row id="2"><cell>Joe Blow</cell><cell>Best Mode</cell>            <cell>24</cell></row>';
xmlstring += '<row id="3"><cell>Jane Dow</cell><cell>Best Mode</cell>            <cell>18</cell></row>';
xmlstring += '</rows>';

$( document ).ready(function() {
    $('#example').dataTable();
    
    $("#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);
        });  
    });

    
    
});