Using DataTables when importing xml in HTML Can't figure out why it doesn't work..
Using DataTables when importing xml in HTML Can't figure out why it doesn't work..
milo_8
Posts: 1Questions: 1Answers: 0
Hi,
I am a bit lost and can't see what is wrong with my code. Here is the situation I am loading an xml file through jquery. I would like then use DataTables on my html tables. Unfortunately it doesn't working ( I mean table is created but the plugin is not active ). I have tried differently, by creating an HTML table by entering manually my data in my code then it worked. As all the example provide with DataTables are with HTML tables that have already been created,can someone help how to to when HTML table is created through jquery:
My xml data called rocol
.<?xml version="1.0" encoding="UTF-8"?>
-<document>
-<row>
<Col0>1</Col0>
<Col1>2</Col1>
<Col2>3</Col2>
</row>
-<row>
<Col0>2</Col0>
<Col1>4</Col1>
<Col2>5</Col2>
</row>
</document>
And my code :
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.11.3.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "rocol.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('row').each(function(){
var Cl0 = $(this).find("Col0").text();
var Cl1 = $(this).find("Col1").text();
var Cl2 = $(this).find("Col2").text();
$('<tr></tr>').html('<td>'+Cl0+'</td><td>'+Cl1+'</td><td>'+Cl2+'</td>').appendTo('#chart');
});
}
});
});
$(document).ready(function() {
$('#chart').DataTable();
} );
</script>
</head>
<body>
<table id="chart" class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Order</th>
<th>Dataheader</th>
<th>Dataheader2</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Order</th>
<th>Dataheader</th>
<th>Dataheader2</th>
</tr>
</tfoot>
<tbody>
<tr></tr>
</tbody>
</table>
</body>
</html>
This discussion has been closed.