当HTML表通过xml导入创建时，DataTables。

I am a bit lost and can't see what is wrong with my code. Here is the situation I am loading an xml file through jquery. I would like then use DataTables on my html tables. Unfortunately it doesn't working ( I mean table is created but the plugin is not active ). I have tried differently, by creating an HTML table by entering manually my data in my code then it worked. As all the example provide with DataTables are with HTML tables that have already been created,can someone help me how to make DataTables working when HTML table is created through jquery:

我有点迷糊了，看不出我的代码有什么问题。下面是我通过jquery加载xml文件的情况。然后，我希望在html表中使用DataTables。不幸的是，它不能工作(我的意思是创建了表，但是插件没有活动)。我尝试了不同的方法，通过在代码中手动输入数据来创建HTML表，然后它就工作了。由于所有提供DataTables的示例都是已经创建的HTML表，所以在通过jquery创建HTML表时，谁能帮助我如何使DataTables工作:

My xml data called rocol

我的xml数据叫做rocol

<?xml version="1.0" encoding="UTF-8"?>
-<document>
-<row>
<Col0>1</Col0>
<Col1>2</Col1>
<Col2>3</Col2>
</row>
-<row>
<Col0>2</Col0>
<Col1>4</Col1>
<Col2>5</Col2>
</row>
</document>

My code :

我的代码:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.11.3.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css"/>
<script>

$(document).ready(function(){
 $.ajax({
  type: "GET",
  url: "rocol.xml",
  dataType: "xml",
  success: function(xml) {
   $(xml).find('row').each(function(){
    var Cl0 = $(this).find("Col0").text();
    var Cl1 = $(this).find("Col1").text();
    var Cl2 = $(this).find("Col2").text();
    $('<tr></tr>').html('<td>'+Cl0+'</td><td>'+Cl1+'</td><td>'+Cl2+'</td>').appendTo('#chart');
   });
  }
 });
});

 $(document).ready(function() {
    $('#chart').DataTable();
} );

</script>
</head>
<body>

<table id="chart" class="display" cellspacing="0" width="50%">
  <thead>
            <tr>
                <th>Order</th>
                <th>Dataheader</th>
                <th>Dataheader2</th>           
            </tr>
  </thead>
<tfoot>
            <tr>
                <th>Order</th>
                <th>Dataheader</th>
                <th>Dataheader2</th>           
            </tr>
</tfoot>
<tbody>
<tr></tr>
</tbody>
</table>

</body>
</html>

Thanks in advance

谢谢提前

saskap

2 个解决方案

#1

Beside the obvious problem with asynchronicity - the dataTable is initialised before your AJAX has finished - it generally is a bad idea to build such table layouts programmatically, especially when dealing with dataTables. It is hard to maintain and hard to read, but also produces an overhead since dataTables will regenerate the <tbody> structure anyway. If you have many records it can have an unnessecary negative impact on performance. I would suggest that you parse the XML into a valid data array and pass that array to dataTables as data. Example :

除了异步性的明显问题(在AJAX完成之前就初始化了dataTable)之外，以编程方式构建此类表布局通常不是一个好主意，尤其是在处理数据时。它很难维护和读取，但也会产生开销，因为dataTables无论如何都会重新生成结构。如果你有很多记录，它会对你的表现产生负面影响。我建议您将XML解析为一个有效的数据数组，并将该数组作为数据传递给datatable。例子:

function loadData(rocol) {
    var data = [];
    $(rocol).find('row').each(function(){
       data.push([
          $(this).find("Col0").text(),
          $(this).find("Col1").text(),
          $(this).find("Col2").text()
       ])
   }) 
   return data; 
}    

$("#chart").DataTable({
   data : loadData(rocol)
})

demo -> http://jsfiddle.net/mond9ret/

演示- > http://jsfiddle.net/mond9ret/

The final code when loading via AJAX would be

通过AJAX加载的最终代码是。

$.ajax({
  url: "rocol.xml",
  success: function(xml) {
     $("#chart").DataTable({
        data: loadData(xml)
     })    
  }
})

This ensures

这样可以确保

Things happends in the right order
事情发生的顺序是正确的
Easier to maintain
更容易维护
You let dataTables itself build the table.
您让dataTables自己构建表。

#2

Since AJAX calls work on a differen thread than the main, the datatable gets loaded before the data from de AJAX is in the table. If you do changes to the tabel after datatables has loaded, you need to call the draw function.

由于AJAX调用在一个不同于main的线程上工作，所以在表中显示来自de AJAX的数据之前，将加载datatable。如果在加载了datatable之后对表进行更改，则需要调用draw函数。

https://datatables.net/reference/api/draw()

Do this in your ajax success handler after the inserting.

在插入之后，在ajax成功处理程序中执行此操作。

Also: you could init datatables after the insertions in the table;

同样:可以在表中插入之后初始化数据项;

$(document).ready(function(){
 $.ajax({
  type: "GET",
  url: "rocol.xml",
  dataType: "xml",
  success: function(xml) {
   $(xml).find('row').each(function(){
    var Cl0 = $(this).find("Col0").text();
    var Cl1 = $(this).find("Col1").text();
    var Cl2 = $(this).find("Col2").text();
    $('<tr></tr>').html('<td>'+Cl0+'</td><td>'+Cl1+'</td><td>'+Cl2+'</td>').appendTo('#chart');
    $('#chart').DataTable();

   });
  }
 });
});

#1

function loadData(rocol) {
    var data = [];
    $(rocol).find('row').each(function(){
       data.push([
          $(this).find("Col0").text(),
          $(this).find("Col1").text(),
          $(this).find("Col2").text()
       ])
   }) 
   return data; 
}    

$("#chart").DataTable({
   data : loadData(rocol)
})