Question

我正在使用datatables并使用bootstrap-daterangepicker选择数据将在数据表格中显示的范围。

工作正常。

问题是当我在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%"}
                                      ]
                    });
}

Answer 1

要完全删除和删除带有DOM元素的datatable对象，您需要：

//Delete the datable object first
if(oTable != null)oTable.fnDestroy();
//Remove all the DOM elements
$('#feedback-datatable').empty();

Answer 2

只需将此参数添加到您的声明中：

"bDestroy" : true,

然后，只要你想重新创造＆＃34;它赢得的表格不会丢失错误

P.S。您可以创建一个函数来获取所需的参数，然后在运行时使用不同的选项重新初始化表。

例如，我在我的程序中使用这个，如果它可以帮助您根据需要调整它

 initDataTable($('#tbl1'), 2, 'asc', false, false, 25, false, false, false, 'landscape', rptHdr);  /* Initialize Table */

/*---------------------- Datatable initialization  --------------------------- */
/*
 * @$table           Table id which be initialized
 * @sortCol          Column number that will be initially sortered 
 * @sorOrder         Ascendant (asc) or Descendant (desc)
 * @enFilter         Boolean value to enable or not the filter option
 * @enPaginate       Boolean value to enable or not the filter option
 * @dplyLength       Number of records contained per page when pagination is enabled
 * @enInfo           Boolean value to show or not the records info
 * @autoWidth        Boolean value to enable or not table autowidth
 * @enTblTools       Boolean value to enable or not the table tools addin
 * @pdfOrientation   Page orientation (landscape, portrait) for pdf documents (required enTblTools == enabled)
 * @fileName         Output file naming (required enTblTools == enabled)

 /*------------------------------------------------------------------------------*/  
function initDataTable($table, sortCol, sortOrder, enFilter, enPaginate, dplyLength, enInfo, autoWidth, enTblTools, pdfOrientation, fileName) {

    var dom = (enTblTools) ? 'T' : '';

    var oTable = $table.dataTable({
        "order": [
            [sortCol, sortOrder]
        ],
        "bDestroy": true,
        "bProcessing": true,
        "dom": dom,
        "bFilter": enFilter,
        "bSort": true,
        "bSortClasses": true,
        "bPaginate": enPaginate,
        "sPaginationType": "full_numbers",
        "iDisplayLength": dplyLength,
        "bInfo": enInfo,
        "bAutoWidth": autoWidth,
        "tableTools": {
            "aButtons": [{
                    "sExtends": "copy",
                    "sButtonText": "Copy",
                    "bHeader": true,
                    "bFooter": true,
                    "fnComplete": function(nButton, oConfig, oFlash, sFlash) {
                        $().shownotify('showNotify', {
                            text: 'Table copied to clipboard (no formatting)',
                            sticky: false,
                            position: 'middle-center',
                            type: 'success',
                            closeText: ''
                        });
                    }
                }, {
                    "sExtends": "csv",
                    "sButtonText": "Excel (CSV)",
                    "sToolTip": "Save as CSV file (no formatting)",
                    "bHeader": true,
                    "bFooter": true,
                    "sTitle": fileName,
                    "sFileName": fileName + ".csv",
                    "fnComplete": function(nButton, oConfig, oFlash, sFlash) {
                        $().shownotify('showNotify', {
                            text: 'CSV file saved in selected location.',
                            sticky: false,
                            position: 'middle-center',
                            type: 'success',
                            closeText: ''
                        });
                    }
                }, {
                    "sExtends": "pdf",
                    "sPdfOrientation": pdfOrientation,
                    "bFooter": true,
                    "sTitle": fileName,
                    "sFileName": fileName + ".pdf",
                    "fnComplete": function(nButton, oConfig, oFlash, sFlash) {
                        $().shownotify('showNotify', {
                            text: 'PDF file saved in selected location.',
                            sticky: false,
                            position: 'middle-center',
                            type: 'success',
                            closeText: ''
                        });
                    }
                },
                {
                   "sExtends": "Other",
                   "bShowAll": true,
                   "sMessage": fileName,
                   "sInfo": "Please press escape when done"
                }
            ]
        }
        /*"fnDrawCallback": function( oSettings ) {alert( 'DataTables has redrawn the table' );}*/
    });
    /* If is IE then avoid setting the sticky headers */
    if (!navigator.userAgent.match(/msie/i) && enPaginate == false) {
        new $.fn.dataTable.FixedHeader(oTable);
    }

    return oTable
}

伊凡。

Answer 3

我知道这是一个老问题，但是因为我碰到了类似的问题并解决了它。

以下应该做的伎俩（评论来自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();

Answer 4

对于DataTables 1.10，调用是：

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

// Remove DOM elements
$('#feedback-datatable').empty();

Answer 5

对于Google搜索者

我很难设法销毁Datatable，在加载新数据之前清空所有以前的数据，并通过这样做重新初始化Datatable，

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

...

// Load table with new data and re-initialize Datatable

Answer 6

$('#feedback-datatable').dataTable().fnDestroy();

这应该破坏dataTable，然后你将不得不重新初始化dataTable。

Answer 7

在DataTables 1.10及更高版本上，您可以使用"destroy": true

了解详情here

Answer 8

来自DataTable

var table = $('#myTable').DataTable();
$('#tableDestroy').on( 'click', function () {
table.destroy();
});

从服务器重新加载完整的表格描述，包括列：

var table = $('#myTable').DataTable();
$('#submit').on( 'click', function () {
    $.getJSON( 'newTable', null, function ( json ) {
        table.destroy();
        $('#myTable').empty(); // empty in case the columns change

        table = $('#myTable').DataTable( {
            columns: json.columns,
            data:    json.rows
        } );
    } );
});

希望它会有所帮助

如何销毁数据表？

8 个答案: