通过导入 xml 创建 HTML 表时的 DataTables答案

【问题标题】：DataTables when HTML table is created through import of xml通过导入 xml 创建 HTML 表时的 DataTables
【发布时间】：2015-08-25 11:43:03
【问题描述】：

我有点迷茫，看不出我的代码有什么问题。这是我通过 jquery 加载 xml 文件的情况。然后我想在我的 html 表上使用 DataTables。不幸的是它不起作用（我的意思是表已创建但插件未激活）。我尝试了不同的方法，通过在我的代码中手动输入我的数据来创建一个 HTML 表，然后它就起作用了。由于 DataTables 提供的所有示例都带有已经创建的 HTML 表，有人可以帮助我在通过 jquery 创建 HTML 表时如何使 DataTables 工作：

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

我的代码：

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

提前致谢

萨斯卡

【问题讨论】：

还值得注意的是，您将数据添加到表中，而不是子 tbody。

标签： javascript html ajax xml datatables

【解决方案1】：

除了异步性的明显问题——dataTable 在你的 AJAX 完成之前初始化——通常以编程方式构建这样的表格布局是一个坏主意，尤其是在处理 dataTables 时。它很难维护和阅读，而且还会产生开销因为 dataTables 无论如何都会重新生成<tbody> 结构。如果您有许多记录，则可能会对性能产生不必要的负面影响。我建议您将 XML 解析为 valid data array 并将 array 作为 data 传递给 dataTables。示例：

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

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

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

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

这确保了

事情按正确的顺序发生
更易于维护
您让 dataTables 自己构建表。

【讨论】：

【解决方案2】：

由于 AJAX 调用在与主线程不同的线程上工作，因此数据表在来自 de AJAX 的数据进入表之前被加载。如果在加载数据表后对表格进行更改，则需要调用绘图函数。

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

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

另外：您可以在插入表格后初始化数据表；

$(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();

   });
  }
 });
});

【讨论】：