22

私はdatatablesを使用しており、 bootstrap-daterangepickerを使用してDatatablesに表示されるデータの範囲を選択しています。

正常に動作しています。

問題は、daterangepicker で新しい範囲を選択すると、自分の作業を実行できるコールバック関数が提供されることです。そのコールバック関数で、Datatables を再度呼び出しています。しかし、テーブルは既に作成されているので、前のテーブルを破棄して新しいテーブルを代わりに表示するにはどうすればよいでしょうか?

親切に助けてください。私は立ち往生しています。:(

編集:私は次のコードを持っています:

$(element).daterangepicker({options},
function (startDate, endDate) { //This is the callback function that will get called each time
$('#feedback-datatable').dataTable({
                        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
                        "sPaginationType": "bootstrap",
                        "oLanguage": {
                            "sLengthMenu": "_MENU_ records per page",
                            "oPaginate": {
                                "sPrevious": "Prev",
                                "sNext": "Next"
                            }
                        },
                        "aoColumnDefs": [{
                            'bSortable': false,
                            'aTargets': [2,4]
                        }],
                        "bAutoWidth": false,
                        "aoColumns": [
                                      {"sWidth": "20%"},
                                      {"sWidth": "15%"},
                                      {"sWidth": "45%"},
                                      {"sWidth": "15%"},
                                      {"sWidth": "5%"}
                                      ]
                    });
}
4

8 に答える 8

29

DOM 要素を含むデータテーブル オブジェクトを完全に削除するには、次の操作を行う必要があります。

//Delete the datable object first
if(oTable != null)oTable.fnDestroy();
//Remove all the DOM elements
$('#feedback-datatable').empty();
于 2013-03-02T10:09:11.337 に答える
14

このパラメーターを宣言に追加するだけです。

"bDestroy" : true,

その後、テーブルを「再作成」するたびに、エラーは発生しません

PS関数を作成して必要なパラメーターを取得し、実行時にさまざまなオプションでテーブルを再初期化できます。

たとえば、私は自分のプログラムでこれを使用しています。必要に応じて適応させるのに役立つ場合

initDataTable($('#tbl1'), 2, 'asc', false, false, 25, false, false, false, 'landscape', rptHdr); /* テーブルの初期化 */
/* ----------------------- データテーブルの初期化 ------------------------ --- */
/*
 * @$table 初期化するテーブルID
 * @sortCol 最初にソートされる列番号
 * @sorOrder アセンダント (asc) またはディセンダント (desc)
 * @enFilter フィルター オプションを有効にするかどうかを示すブール値
 * @enPaginate フィルター オプションを有効にするかどうかを示すブール値
 * @dplyLength ページネーションが有効な場合、ページごとに含まれるレコードの数
 * @enInfo レコード情報を表示するかどうかのブール値
 * @autoWidth テーブルの自動幅を有効または無効にするブール値
 * @enTblTools テーブル ツール アドインを有効にするかどうかを示すブール値
 * @pdfOrientation PDF ドキュメントのページの向き (横、縦) (enTblTools == 有効が必要)
 * @fileName 出力ファイルの命名 (enTblTools == 有効が必要)

  /*------------------------------------------------ ------------------------------*/  
function initDataTable($table, sortCol, sortOrder, enFilter, enPaginate, dplyLength, enInfo, autoWidth, enTblTools, pdfOrientation, fileName) {
    
    var dom = (enTblTools) ? 'T' : '';

    var oTable = $table.dataTable({
        "注文"： [
            [sortCol、sortOrder]
        ]、
        "bDestroy": 真,
        "bProcessing": true,
        「ドム」：ドム、
        "bFilter": enFilter,
        "bSort": 真、
        "bSortClasses": true,
        "bPaginate": enPaginate,
        "sPaginationType": "full_numbers",
        "iDisplayLength": dplyLength,
        "bInfo": enInfo,
        "bAutoWidth": autoWidth,
        "テーブルツール": {
            "aButtons": [{
                    "sExtends": "コピー",
                    "sButtonText": "コピー",
                    "bHeader": 真,
                    "bFooter": 真,
                    "fnComplete": function(nButton, oConfig, oFlash, sFlash) {
                        $().shownotify('showNotify', {
                            text: '表をクリップボードにコピーしました (フォーマットなし)',
                            スティッキー: false,
                            位置: '中間センター',
                            タイプ: '成功',
                            closeText: ''
                        });
                    }
                }、{
                    "sExtends": "csv",
                    "sButtonText": "Excel (CSV)",
                    "sToolTip": "CSV ファイルとして保存 (書式なし)",
                    "bHeader": 真,
                    "bFooter": 真,
                    "sTitle": ファイル名,
                    "sFileName": ファイル名 + ".csv",
                    "fnComplete": function(nButton, oConfig, oFlash, sFlash) {
                        $().shownotify('showNotify', {
                            text: 'CSV ファイルが選択した場所に保存されました。',
                            スティッキー: false,
                            位置: '中間センター',
                            タイプ: '成功',
                            closeText: ''
                        });
                    }
                }、{
                    "sExtends": "pdf",
                    "sPdfOrientation": pdfOrientation,
                    "bFooter": 真,
                    "sTitle": ファイル名,
                    "sFileName": ファイル名 + ".pdf",
                    "fnComplete": function(nButton, oConfig, oFlash, sFlash) {
                        $().shownotify('showNotify', {
                            text: '選択した場所に保存された PDF ファイル。',
                            スティッキー: false,
                            位置: '中間センター',
                            タイプ: '成功',
                            closeText: ''
                        });
                    }
                }、
                {
                   "sExtends": "その他",
                   "bShowAll": 真,
                   "sMessage": ファイル名,
                   "sInfo": "完了したらエスケープを押してください"
                }
            ]
        }
        /*"fnDrawCallback": function( oSettings ) {alert( 'DataTables がテーブルを再描画しました' );}*/
    });
    /* IE の場合、スティッキー ヘッダーの設定を避ける */
    if (!navigator.userAgent.match(/msie/i) && enPaginate == false) {
        新しい $.fn.dataTable.FixedHeader(oTable);
    }

    oTable を返す
}

イワン。

于 2014-05-22T15:17:21.973 に答える
7

DataTables 1.10 の場合、呼び出しは次のとおりです。

// Destroy dataTable
$('#feedback-datatable').DataTable.destroy();

// Remove DOM elements
$('#feedback-datatable').empty();
于 2015-03-01T14:28:53.007 に答える
7

これは古い質問であることは知っていますが、同様の問題に遭遇して解決したためです。

以下はトリックを行う必要があります（コメントはDataTable API docからのものです）。 

// Quickly and simply clear a table
$('#feedback-datatable').dataTable().fnClearTable();

// Restore the table to it's original state in the DOM by removing all of DataTables enhancements, alterations to the DOM structure of the table and event listeners
$('#feedback-datatable').dataTable().fnDestroy();
于 2015-02-26T21:38:46.947 に答える
2

Google 検索者向け

新しいデータをロードし、このようにしてDatatableDatatableを再初期化する前に、以前のデータをすべて空にします。

if ($.fn.DataTable.isDataTable("#myTbl")) {
      ("#myTbl").DataTable().destroy();
}
$('#myTbl tbody > tr').remove();

...

// Load table with new data and re-initialize Datatable
于 2016-06-29T06:23:06.063 に答える
1

DataTables 1.10以降では、使用できます"destroy": true

詳細はこちら

于 2016-05-05T14:57:11.240 に答える