DataTables：#example working，但#datatable在进行AJAX调用时不工作

Question

我想知道#example和#datatable之间的区别。我看到一个例子，他们使用一个div ID为的数据表使用一些硬编码值。另外一个表格的div ID为示例。我可以为第二个示例创建一个Ajax调用。但我不能为第一个做。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var oTable = $('#example').dataTable({ 
      "bProcessing": true, 
      "sAjaxSource": "Json/CustomerListJson.php", 
      "sScrollX": "70%", 
      "sScrollXInner": "110%", 
      "bScrollCollapse": true 
     }); 
    });     
</script> 

上述代码运行良好。 但如果我更改表ID到数据表像

<script type="text/javascript"> 
    $(document).ready(function() { 
     var oTable = $('#datatable').dataTable({ 
      "bProcessing": true, 
      "sAjaxSource": "Json/CustomerListJson.php", 
      "sScrollX": "70%", 
      "sScrollXInner": "110%", 
      "bScrollCollapse": true 
     }); 
    });     
</script> 
<div id="dynamic"> 
<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="datatable"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Contact</th> 
      <th>Email</th> 
      <th>Address</th> 
      <th>City</th> 
      <th>State</th> 
      <th>Country</th> 
      <th>Phone</th> 
     </tr> 
    </thead> 
    <tbody> 

    </tbody> 
</table>  
</div> 

我得到了一个警告弹出警告它说

数据表警告（表ID =“数据表”）：不能重新初始化数据表。

要检索此表的DataTables对象，请不传递参数或查看bRetrieve和bDestroy的文档。

这是我第一个使用Bootstrap CSS的项目。 请给我提供最好的方法。

我想要这种类型的外观和感觉。

但我得到了这种类型的表。

最后我得到这个错误信息，如果我使用#datatable

DataTables warning (table id = 'datatable'): Cannot reinitialise DataTable. 

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy 

Answer 1

在初始化数据表一样两次，你会得到一个警告。检查this的例子。使用数据表docs中给出的示例，我能够应用Bootstrap css。检查相同的小提琴链接。

如果由于某些原因您无法删除第二个数据表，请设置bDestroy为true链接此example或检查this链接$("#tableId").dataTable().fnDestroy();。

$('#example').dataTable({ 
     "sScrollY": "200px", 
     "bPaginate": false 
    }); 

    // Some time later.... 
    $('#example').dataTable({ 
     "bFilter": false, 
     "bDestroy": true //<-- set bDestroy to true which will destroy the previous initializarion 
    }); 

更改此

var oTable = $('#datatable').dataTable({ 
     "bProcessing": true, 
     "sAjaxSource": "Json/CustomerListJson.php", 
     "sScrollX": "70%", 
     "sScrollXInner": "110%", 
     "bScrollCollapse": true 
    }); 

到

var oTable = $('#datatable').dataTable({ 
     "bProcessing": true, 
     "sAjaxSource": "Json/CustomerListJson.php", 
     "sScrollX": "70%", 
     "sScrollXInner": "110%", 
     "bScrollCollapse": true, 
     "bDestroy": true, 
     "bJQueryUI": true 
    });