New To DataTables: Dynamically Populating a DataTable
New To DataTables: Dynamically Populating a DataTable
Hello,
I just downloaded DataTables and this looks great! I am however having an issue dynamically populating a DataTable using my XML string. 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
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
$(document).ready(function() {
$('#example').dataTable();
} );
DataTables zero configuration example
//want to remove these
Rendering engine//want to remove these
Browser//want to remove these
Platform(s)//want to remove these
Engine version//want to remove these
CSS grade//want to remove these
//want to remove these
Trident//want to remove these
Internet
Explorer 4.0//want to remove these
Win 95+//want to remove these
4//want to remove these
X//want to remove these
[/code]
index.js
[code]
$(function () {
$("input.query").keyup(function (e) {
// check if ENTER key was pressed
if (e.keyCode == "13") {
var data = '' +
'' +
'' +
'deviceid11manager100' +
'deviceid21director100' +
'' +
'' +
'';
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 = $("");
row.append($("").text("#"));
$firstrow.children().each(function(){
row.append($("").text(this.nodeName));
});
row.appendTo($("table.display thead"));
var ndx = 0;
$txt.children("results").children().each(function () {
row = $("");
row.append($("").text(ndx + 1));
$(this).children().each(function () {
row.append($("").text($(this).text()));
row.appendTo($("table.display tbody"));
});
ndx++;
});
if (ndx == 0) {
// no rows returned
$("table.display thead").empty();
$("table.display tbody").empty();
}
}
});
});
[/code]
I just downloaded DataTables and this looks great! I am however having an issue dynamically populating a DataTable using my XML string. 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
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
$(document).ready(function() {
$('#example').dataTable();
} );
DataTables zero configuration example
//want to remove these
Rendering engine//want to remove these
Browser//want to remove these
Platform(s)//want to remove these
Engine version//want to remove these
CSS grade//want to remove these
//want to remove these
Trident//want to remove these
Internet
Explorer 4.0//want to remove these
Win 95+//want to remove these
4//want to remove these
X//want to remove these
[/code]
index.js
[code]
$(function () {
$("input.query").keyup(function (e) {
// check if ENTER key was pressed
if (e.keyCode == "13") {
var data = '' +
'' +
'' +
'deviceid11manager100' +
'deviceid21director100' +
'' +
'' +
'';
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 = $("");
row.append($("").text("#"));
$firstrow.children().each(function(){
row.append($("").text(this.nodeName));
});
row.appendTo($("table.display thead"));
var ndx = 0;
$txt.children("results").children().each(function () {
row = $("");
row.append($("").text(ndx + 1));
$(this).children().each(function () {
row.append($("").text($(this).text()));
row.appendTo($("table.display tbody"));
});
ndx++;
});
if (ndx == 0) {
// no rows returned
$("table.display thead").empty();
$("table.display tbody").empty();
}
}
});
});
[/code]
This discussion has been closed.
Replies
Have a look at this FAQ: http://datatables.net/faqs#append - basically you need to use the API.
Allan
Allan