3

我想知道#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>

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

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
4

1 回答 1

2

当您两次初始化同一个数据表时，您将收到警告。检查这个例子。使用数据表文档中给出的示例，我能够应用 Bootstrap css。检查相同的小提琴链接。

如果由于某种原因您无法删除第二个数据表调用，请将 bDestroy 设置为 true 链接此示例或检查此链接$("#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
    } );
于 2012-10-22T06:27:03.997 回答