可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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:

My xml data called 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

回答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 :

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/

The final code when loading via AJAX would be

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

回答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.

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

Do this in your ajax success handler after the inserting.

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

   });
  }
 });
});