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

Question

我想知道#example 和#datatable 之间的区别。我在那里看到了一个例子，他们使用一个带有 div id 的表作为 datatable 使用一些硬编码值。另一个以 div id 为 example 的表。我可以为第二个示例进行 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>

我收到一个警告弹出警报，上面写着

DataTables 警告（表 id = 'datatable'）：无法重新初始化 DataTable。

要检索此表的 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
    } );