通过导入 xml 创建 HTML table 时的 DataTables

Question

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

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

提前致谢

萨斯卡普

Answer 1

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

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

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

此外：您可以在 table;

中插入后初始化数据 tables

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

   });
  }
 });
});

Answer 2

除了明显的异步性问题 - 数据表在您的 AJAX 完成之前初始化 - 以编程方式构建此类 table 布局通常是一个坏主意，尤其是在处理数据表时。它难以维护且难以阅读，而且还会产生开销 ，因为 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 自己构建 table。

通过导入 xml 创建 HTML table 时的 DataTables

DataTables when HTML table is created through import of xml

html

javascript

xml

ajax

datatables