datatable中的fnAddData()添加到同一行而不是添加到新行

时间:2015-02-07 11:27:01

标签: javascript jquery xml datatable

我需要根据xml数据在datatable中显示xml字符串..

var xml = "<Users><user><username>user</username><password>password</password></user><user><username>user1</username><password>password1</password></user><user><username>user2</username><password>password2</password></user></users>";  //this is a sample, but in reality I'm getting the xml string from server
xmlDoc = $.parseXML(xml);  //parsing xml to valid xml document
var $events = $(xmlDoc).find("Users");   

var thisTable;
thisTable = $("#user-data").dataTable(      //user-data is the id of my table
    {
        "sPaginationType": "full_numbers",
        "bJQueryUI": true
   }
);

$events.each(function(index, event){
    console.log('test');
    var $event = $(event),
    addData = [];
    addData.push( $event.children("loan").children("user").children("username").text());
    addData.push($event.children("user").children("password").text());
    thisTable.fnAddData(addData);
});

这是基于此处的演示

http://jsfiddle.net/jqbv2/

但我在我的控制台中有一个非常奇怪的问题,&#34;测试&#34;只打印一次,所以每次只迭代一次。同样在我的表中,所有用户名都显示在第一行的用户名字段中,所有密码都显示在第一行的密码字段中。也就是说,我在相对时间内使用的数据是完全不同的,这仅仅是一个例子。这是表

<table class="table table-striped table-bordered table-hover" id="loan-data">
    <thead>
        <tr>
            <th>Username</th>
            <th>Password</th>
       </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我无法弄清楚为什么所有数据都被添加到一行中,这主要是因为.each只是一个迭代,无论有多少数据列表存在。它在小提琴示例中完美地运行,但是当我尝试进行一些修改时,我发现了这种冲突..

1 个答案:

答案 0 :(得分:1)

这个更新的each应该可以解决问题:

var eventChildren = $event.children("loan");
eventChildren.each(function(index, event){
    console.log('test');
    var $event = $(event),
    addData = [];
    addData.push( $event.children("user").children("username").text());
    addData.push($event.children("user").children("password").text());
    thisTable.fnAddData(addData);
});

loan包含 nodeName user的孩子。因此,我们需要迭代loan而不是文档根目录。