Question

我想知道#example和#datatable之间的区别。我已经看到一个例子，他们使用一个带有div id的表作为 datatable 使用一些硬编码值。另一个表格的div为示例。我可以为第二个例子进行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警告（table id ='datatable'）：无法重新初始化DataTable。

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

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

我想要这种外观和感觉。

enter image description here 但我得到了这种类型的表。

最后，如果我使用#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
    } );

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

1 个答案: