3

#exampleと#datatableの違いを知りたいです。ハードコードされた値を使用して、データテーブルとしてdividを持つ1つのテーブルを使用している例を1つ見ました。そして、例としてdividを持つ別のテーブル。その2番目の例に対して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を次のようにdatatableに変更すると

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

警告ポップアラートが1つ届きました。

DataTables警告（テーブルID ='datatable'）：DataTableを再初期化できません。

このテーブルのDataTablesオブジェクトを取得するには、引数を渡さないか、bRetrieveとbDestroyのドキュメントを参照してください。

これは、BootstrapCSSを使用した最初のプロジェクトです。最善の方法を教えてください。

このようなルックアンドフィールが欲しいです。

ここに画像の説明を入力してください しかし、私はこのタイプのテーブルを手に入れました。 ここに画像の説明を入力してください

#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

同じデータテーブルを2回初期化すると、警告が表示されます。この例を確認してください。datatableのドキュメントに記載されている例を使用して、 Bootstrapcssを適用することができました。同じフィドルリンクを確認してください。

何らかの理由で2番目のデータテーブル呼び出しを削除できない場合は、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 に答える