如何从RESTXML响应使用jQuery构建数据表？_Jquery_Datatables

如何从RESTXML响应使用jQuery构建数据表？

jquery datatables

如何从RESTXML响应使用jQuery构建数据表？,jquery,datatables,Jquery,Datatables,我有一个来自Ajax REST调用的XML响应。类似于下面的一个 <eventBlock> <event eventId="641"> <processId>myprocess</processId> <batchId>15581</batchId> <user>Ajay</user>

我有一个来自Ajax REST调用的XML响应。类似于下面的一个

    <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>


我的过程
15581
阿杰
XYZ
慢跑
运动型
2011-11-22 00:00:00.0
用户5

我的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>


.....
事件
进程ID
batchId
使用者
参与者
活动
笔记
createdOn
创造的

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>


var表；
此表=$（“#事件”）.dataTable(
{
“sPaginationType”：“完整编号”，
“bJQueryUI”：真的吗
}
);
函数addToTable（响应）{
var$events=$（response.find（“事件”）；
$events.each（函数（索引、事件）{
变量$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（“活动”）.text（））；
addData.push（$event.children（“note”）.text（））；
addData.push（$event.children（“createdOn”）.text（））；
addData.push（$event.children（“createdBy”）.text（））；
此表.fnAddData（addData）；
});
}
函数submitForm（）{
$.ajax({
url:“../data.xml”，
数据：{
batchId:1234，
进程ID:AFSFGG
},
键入：“获取”，
成功：可添加
});
返回false；
}

当我点击提交按钮时。我得到以下关于firebug的错误信息。有人能帮我解决这个问题吗

oSettings为空 [在此错误上中断]
var iRow=oSettings.aoData.length

提前谢谢

其余的可能是跨域的，在这种情况下，您需要在服务器上创建一个代理来检索XML。代理成为您的ajax url

如果您的目标是创建一个“只读”表，那么您可以简单地将xml打印为ajax请求的输出，并在调用datatables之前自己在ajax sucecss回调中将输出解析为表

如果您需要编辑功能并希望数据源直接传递给datatables插件，则需要将xml服务器端解析为json

你如何处理这一切取决于你的需要。无论采用哪种方式，代理都相对容易设置

如果REST服务于JSONP，则可以绕过代理

编辑。另一种方法是使用像Yahoo YQL这样的服务作为代理。可以在几分钟内设置，其余的可能是跨域的，在这种情况下，您需要在服务器上创建一个代理来检索XML。代理成为您的ajax url

如果您的目标是创建一个“只读”表，那么您可以简单地将xml打印为ajax请求的输出，并在调用datatables之前自己在ajax sucecss回调中将输出解析为表

如果您需要编辑功能并希望数据源直接传递给datatables插件，则需要将xml服务器端解析为json

你如何处理这一切取决于你的需要。无论采用哪种方式，代理都相对容易设置

如果REST服务于JSONP，则可以绕过代理

编辑。另一种方法是使用像Yahoo YQL这样的服务作为代理。可以在几分钟内设置，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 = [];

            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);
        });
    }
});

确保发送给fnAddData的数组的项数与表的标题数相同

编辑在检查了HTML和Javascript之后，我无法重现这个问题

我想说，还有更多的代码，你没有包括在内，这影响了结果

我可能应该指出，内联javascript函数在webdev圈子中通常是不受欢迎的。相反，您应该尝试将javascript代码与html代码分开，如后一个示例中所示

使用

$（“#表单”）.submit（函数{…}）而不是在html中内联函数
在vs上读取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 = [];

            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);
        });
    }
});

确保发送给fnAddData的数组的项数与表的标题数相同
编辑
在检查了HTML和Javascript之后，我无法重现这个问题

我想说，还有更多的代码，你没有包括在内，这影响了结果
我可能应该指出，内联javascript函数在webdev圈子中通常是不受欢迎的。相反，您应该尝试将javascript代码与html代码分开，如后一个示例中所示
使用$（“#表单”）.submit（函数{…}）而不是在html中内联函数
读一读你确实知道的vs，对吧？@FlorianMargaine是的，我知道。但是我该怎么做呢