如何使用jQuery从REST xml响应中构建datatable？ [英] How to build datatable using jQuery from REST xml response?
问题描述
< eventBlock>
< event eventId =641>
< processId> myprocess< / processId>
< batchId> 15581< / batchId>
< user> Ajay< / user>
<参与者> XYZ< / Particip>
< activity>慢跑< / activity>
< note>运动< / note>
< createdOn> 2011-11-22 00：00：00.0< / createdOn>
< createdBy> User5< / createdBy>
< / event>
< / eventBlock>
我的HTML：
< form class =searchformid =searchformaction =javascript：submitForm（）;>
.....
< / form>
< div id =UI>
< table id =eventsclass =display>
< thead>
< tr>
< th> eventId< / th>
< th> processId< / th>
< th批次标识< / th>
< th> user< / th>
< th>参与者< / th>
< th>活动< / th>
< th> note< / th>
< th> createdOn< / th>
< th> createdBy< / th>
< / tr>
< / thead>
< tbody>
< / tbody>
< / table>
< / div>
Javascript：
code>< script type =text / javascript>
var thisTable;
thisTable = $（＃events）dataTable（
{
sPaginationType：full_numbers，
bJQueryUI：true
}
）;
函数addToTable（response）{
var $ events = $（response）.find（event）;
$ events.each（function（index，event）{
var $ event = $（event），
addData = [];
addData.push（$ event.attr（eventId））;
addData.push（$ event.children（processId）。text（））;
addData.push（$ event.children （batchId）。text（））;
addData.push（$ event.children（user）。text（））;
addData.push（$ event.children ）.text（））;
addData.push（$ event.children（activity）。text（））;
addData.push（$ event.children（note）。 ））;
addData.push（$ event.children（createdOn）。text（））;
addData.push（$ event.children（createdBy）。text（））;
thisTable.fnAddData（addData）;
}）;
}
function submitForm（）{
$ .ajax（{
url：'../../ data.xml'，
data ：{
batchId：1234，
processId：afsfafgg
}，
type：GET，
success：addToTable
}）;
返回false;
}
< / script>
当我点击提交。我在firebug下面出现错误。有人可以帮我解决吗？
oSettings为空
[打破此错误]
var iRow = oSettings.aoData.length;
提前感谢
像任何其他数据类型一样处理XML响应。
只要您指定应该期望的类型。
此问题向您展示了如何在JQuery中解析XML。 XML像任何其他元素一样处理。
$。ajax（{
url：xml.xml，
dataType： xml，
type：POST，
success：function（response）{
var $ events = $（response）.find（event）;
$ events.each（function（index，event）{
var $ event = $（event），
addData = [];
$ event.children ）.each（function（i，child）{
addData.push（$（child）.text（））;
}）;
dataTable.fnAddData（addData） ;
}）;
}
}）;
如果你不想循环遍历每个事件中的所有孩子，你可以分配手动
$。ajax（{
url：xml.xml，
dataType：xml
type：POST，
success：function（response）{
var $ events = $（response）.find（event）;
$ events.each（function（index，event）{
var $ event = $（event），
addData = [];
addData.push（$ event。 child（processId）。text（））;
addData.push（$ event.children（batchId）。text（））;
addData.push（$ event.children ）.text（））;
addData.push（$ event.children（participant）。text（））;
addData.push（$ event.children（activity）。 （））;
addData.push（$ event.children（note）。text（））;
addData.push（$ event.children（createdOn）。
addData.push（$ event.children（createdBy）。tex t（）;
dataTable.fnAddData（addData）;
}）;
}
}）;
确保您发送到fnAddData的数组具有与表格头部一样多的项目。 p>
编辑
检查您的HTML和Javascript后，我无法重现问题。
我要猜测，说有更多的代码，你没有包括，这影响了结果。
我应该指出内联JavaScript函数通常在webdev圈子中皱起眉头。您应该尝试将您的JavaScript代码与您的HTML代码分开，如后面的示例。
使用 $（＃form）。提交（function {...}）; 而不是在html中列入函数。
阅读早期事件处理程序注册 vs 传统事件注册模型
I have a XML response from an Ajax REST call. Similar to the one below.
<eventBlock>
<event eventId="641">
<processId>myprocess</processId>
<batchId>15581</batchId>
<user>Ajay</user>
<participant>XYZ</participant>
<activity>Jogging</activity>
<note>Athletic</note>
<createdOn>2011-11-22 00:00:00.0</createdOn>
<createdBy>User5</createdBy>
</event>
</eventBlock>
My HTML:
<form class="searchform" id="searchform" action="javascript: submitForm();">
.....
</form>
<div id="UI">
<table id="events" class="display">
<thead>
<tr>
<th>eventId</th>
<th>processId</th>
<th>batchId</th>
<th>user</th>
<th>participant</th>
<th>activity</th>
<th>note</th>
<th>createdOn</th>
<th>createdBy</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Javascript:
<script type="text/javascript">
var thisTable;
thisTable = $("#events").dataTable(
{
"sPaginationType": "full_numbers",
"bJQueryUI": true
}
);
function addToTable(response){
var $events = $(response).find("event");
$events.each(function(index, event){
var $event = $(event),
addData = [];
addData.push($event.attr("eventId"));
addData.push($event.children("processId").text());
addData.push($event.children("batchId").text());
addData.push($event.children("user").text());
addData.push($event.children("participant").text());
addData.push($event.children("activity").text());
addData.push($event.children("note").text());
addData.push($event.children("createdOn").text());
addData.push($event.children("createdBy").text());
thisTable.fnAddData(addData);
});
}
function submitForm() {
$.ajax({
url:'../../data.xml',
data:{
batchId:1234,
processId:afsfafgg
},
type:"GET",
success:addToTable
});
return false;
}
</script>
When I hit the submit. I get below error on firebug. Can someone help me resolve this?
oSettings is null [Break On This Error]
var iRow = oSettings.aoData.length;
Thanks in advance!
An XML response is handled just like any other data type. As long as you specify what type it should be expecting.
This question shows you how to parse XML in JQuery. XML is handled like any other element.
$.ajax({
url:"xml.xml",
dataType: "xml",
type:"POST",
success: function(response){
var $events = $(response).find("event");
$events.each(function(index, event){
var $event = $(event),
addData = [];
$event.children().each(function(i, child){
addData.push($(child).text());
});
dataTable.fnAddData(addData);
});
}
});
If you don't want to loop through all the children within each event, you can just assign them manually
$.ajax({
url:"xml.xml",
dataType: "xml",
type:"POST",
success: function(response){
var $events = $(response).find("event");
$events.each(function(index, event){
var $event = $(event),
addData = [];
addData.push($event.children("processId").text());
addData.push($event.children("batchId").text());
addData.push($event.children("user").text());
addData.push($event.children("participant").text());
addData.push($event.children("activity").text());
addData.push($event.children("note").text());
addData.push($event.children("createdOn").text());
addData.push($event.children("createdBy").text();
dataTable.fnAddData(addData);
});
}
});
Make sure that the array you send to fnAddData has as many items as the table has headers.
Edit
After checking your HTML and Javascript, I can't reproduce the problem.
I'm going to guess and say that there are more code, that you did not include, that's affecting the outcome.
I should probably point out that inline javascript functions are usually frowned upon in webdev circles. You should instead try to separate your javascript code from your html code, like in the latter example.
Use $("#form").submit(function{...}); instead of inlining the function in your html.
Read up on early event handler registration vs traditional event registration model
这篇关于如何使用jQuery从REST xml响应中构建datatable？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
