I just downloaded DataTables and this plugin looks great! I am however having an issue dynamically populating the plugin's DataTable component. I'm able to populate the table if I have static and 's in the and static and 's in the . I would however like to dynamically build the , and and populate the and entities. The code below, replaces the static table contents with the XML parsed contents when you hit the enter button. Any ideas on how to make this completely dynamic? I tried adding the dataTable class to my table $("table.display").addClass("dataTable");
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<table class="query">
<tr>
<td class="status"></td>
</tr>
<tr>
<td><input class="query defaultText" type="text"
title="Type SQL query here, then press 'Enter' to execute...">
</td>
</tr>
</table>
<div class="full_width big">
DataTables zero configuration example
</div>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr> **//want to remove these**
<th>Rendering engine</th>//want to remove these
<th>Browser</th>//want to remove these
<th>Platform(s)</th>//want to remove these
<th>Engine version</th>//want to remove these
<th>CSS grade</th>//want to remove these
</tr>
</thead>
<tbody>
<tr class="odd gradeX">**//want to remove these**
<td>Trident</td>//want to remove these
<td>Internet
Explorer 4.0</td>//want to remove these
<td>Win 95+</td>//want to remove these
<td class="center"> 4</td>//want to remove these
<td class="center">X</td>//want to remove these
</tr>
</tbody>
</table>
</div>
<div class="spacer"></div>
</div>
</div>
</body>
</html>
index.js:
$(function () {
$("input.query").keyup(function (e) {
// check if ENTER key was pressed
if (e.keyCode == "13") {
var data = '<ns1:executeResponse xmlns:ns1="http://sqlws.test.com">' +
'<ns1:return>' +
'<results>' +
'<row><deviceid>deviceid1</deviceid><domain>1</domain><role>manager</role><usage>100</usage></row>' +
'<row><deviceid>deviceid2</deviceid><domain>1</domain><role>director</role><usage>100</usage></row>' +
'</results>' +
'</ns1:return>' +
'</ns1:executeResponse>';
var $xmlDoc = $($.parseXML(data));
var $txt = $xmlDoc.find('ns1\\:return');
var $firstrow = $txt.children("results").children(":first");
var row;
$("table.display thead").empty();
$("table.display tbody").empty();
$("table.display").addClass("dataTable");
row = $("<tr/>");
row.append($("<th/>").text("#"));
$firstrow.children().each(function(){
row.append($("<th/>").text(this.nodeName));
});
row.appendTo($("table.display thead"));
var ndx = 0;
$txt.children("results").children().each(function () {
row = $("<tr class='odd gradeX'/>");
row.append($("<td/>").text(ndx + 1));
$(this).children().each(function () {
row.append($("<td/>").text($(this).text()));
row.appendTo($("table.display tbody"));
});
ndx++;
});
if (ndx == 0) {
// no rows returned
$("table.display thead").empty();
$("table.display tbody").empty();
}
}
});
});
