web-dev-qa-db-ja.com

DataTableを再初期化できません-データテーブルの動的データ

すべての従業員を示すデータテーブルがあります。 _document.ready_のすべての従業員に対して正常に機能しています。 _'project_manager' & 'team_leader'_のような従業員のタイプを含む選択タグがあり、従業員タイプの変更時に関数get_employees(emp_type)を呼び出して、選択した従業員タイプを渡します。

Ajax応答で必要かつ適切なデータを取得していますが、警告をスローしています

_DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
_

私はそれを破壊しようとしましたが、運はありません。

試してみた

_$('#example').dataTable().fnClearTable();
$('#example').dataTable().fnDestroy();
_

テーブルをクリアし、新しく追加されたデータを表示していますが、毎回列名を持つ新しいソート画像を追加しています。

これが私のコードスニペットです。

_$(document).ready(function() {
            get_employees('all');
        });

        function get_employees(emp_type)
        {
            $.ajax({
                url: '../ajax_request.php',
                type: "POST",
                data: {
                    action: "admin_get_all_employees",
                    type: emp_type
                },
                success: function(response) {
                    var response = jQuery.parseJSON(response);

                    // $('#example').destroy(); tried this but haven’t worked

                    $('#example').dataTable({
                        "aaData": response.data,
                    });
                }
            });
        }
_

前もって感謝します。

jqueryajaxdynamicdatatabledestroy
22
Pramod

DataTablesの現在のバージョン（1.10.4）では、単にdestroy:true構成に追加して、既に存在するテーブルが再初期化される前に削除されるようにします。

$('#example').dataTable({
    destroy: true,
    aaData: response.data
});
58
Coin_op

このテクニカルノート datatablesのセクションでは、この警告の理由について説明しています。そこからの関連情報：

このエラーは、選択したノードのDataTableインスタンスが既に初期化されているときにDataTablesコンストラクターオブジェクトにオプションを渡すことによってトリガーされます。例えば：

_$('#example').dataTable( {
    paging: false
} );


$('#example').dataTable( {
    searching: false
} );
_

上記のドキュメントは、これに対処する2つの方法を説明しています。

  1. 検索：retrievetotrue次のように：
_table = $('#example').DataTable( {
    retrieve: true,
    paging: false
} );
_

  1. 破棄：この場合、table.destroy();を呼び出してからテーブルを再度作成することにより、オブジェクトを明示的に破棄できます。または、受け入れられた回答に記載されているように、単に_destroy: true_オプションを渡すことができます。

    _table = $('#example').DataTable( {
    paging: false
} );

table.destroy();

table = $('#example').DataTable( {
    searching: false
} );
_

Destroy：trueオプションの使用：

_$('#example').DataTable( {
    destroy: true,
    searching: false } );
_

注：このエラーは、dataTableを複数回作成するJavaScriptファイルを含める場合にも発生する可能性があります。私はApacheタイルを使用していて、ベースと拡張定義にそれを含めましたが、これもこのエラーを引き起こしました。

4
user3885927

以下のようなものを試してください

    var $table=$('#example').dataTable({
                    "aaData": response.data,
                });


    $table.fnDestroy();
1
Vicky

これは私を助けました：

var table = $('#example').DataTable( {
    // Clear previous data
    destroy: true,
    // Load new data with AJAX from data.json file.
    ajax: "data.json" 
} );
1
Nole