jQuery 如何销毁数据表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15172873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to destroy a datatable?
提问by LittleLebowski
I'm using datatablesand using bootstrap-daterangepickerto select a range for which data will be shown in Datatables.
我使用的数据表，并使用自举-daterangepicker以选择数据将在数据表中所示是一个范围。
It is working fine.
它工作正常。
The problem is when I select a new range in daterangepicker, it provides me with a callback function where I can do my stuff. In that callback function, I'm calling Datatables again. But since the table is already being created, how can I destroy the previous table and show a new one in it's place?
问题是当我在 daterangepicker 中选择一个新范围时，它为我提供了一个回调函数，我可以在其中做我的事情。在那个回调函数中，我再次调用 Datatables。但是由于表已经被创建，我怎样才能销毁上一个表并在它的位置显示一个新表？
Kindly help. I'm stuck. :(
请帮忙。我被困住了。:(
EDIT: I've the following code:
编辑：我有以下代码：
$(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%"}
]
});
}
回答by sdespont
To completely delete and remove the datatable object with its DOM elements you need to :
要完全删除和移除数据表对象及其 DOM 元素，您需要：
//Delete the datable object first
if(oTable != null)oTable.fnDestroy();
//Remove all the DOM elements
$('#feedback-datatable').empty();
回答by Ivan RS
Just add this parameter to your declaration:
只需将此参数添加到您的声明中：
"bDestroy" : true,
Then whenever you want to "recreate" the table it won't drop an error
然后每当您想“重新创建”表时，它都不会删除错误
P.S. You can create a function to get the required parameters and then reinitialize the table with different options at runtime.
PS 您可以创建一个函数来获取所需的参数，然后在运行时使用不同的选项重新初始化表。
For example I use this one in my programs, if it helps you can adapt it to your needs
例如，我在我的程序中使用了这个，如果它可以帮助您适应您的需求
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
}
Ivan.
伊万。
回答by pete
I know this is an old question, but since I bumped into a similar issue and resolved it.
我知道这是一个老问题，但是因为我遇到了类似的问题并解决了它。
The following should do the trick (the comments are coming from the DataTable API doc).
以下应该可以解决问题（评论来自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();
回答by nurider
For DataTables 1.10, the calls are:
对于 DataTables 1.10，调用是：
// Destroy dataTable
$('#feedback-datatable').DataTable.destroy();
// Remove DOM elements
$('#feedback-datatable').empty();
回答by Shree Krishna
For the google searchers
对于谷歌搜索者
Very hardly I managed to destroy the Datatable, Empty it's all previous data before loading new data and re-initializing Datatable by doing like this,
Datatable在加载新数据并通过这样做重新初始化数据表之前，我几乎没有设法销毁，清空它是所有以前的数据，
if ($.fn.DataTable.isDataTable("#myTbl")) {
("#myTbl").DataTable().destroy();
}
$('#myTbl tbody > tr').remove();
...
// Load table with new data and re-initialize Datatable
回答by Stanley Nguma
回答by Ali Adnan
From DataTable
从数据表
var table = $('#myTable').DataTable();
$('#tableDestroy').on( 'click', function () {
table.destroy();
});
Reload a full table description from the server, including columns:
从服务器重新加载完整的表描述，包括列：
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
} );
} );
});
Hope it will help
希望它会有所帮助
回答by Alfred D'Souza
$('#feedback-datatable').dataTable().fnDestroy();
this should destroy dataTable, then you will have to reinitialize dataTable.
这应该破坏数据表，然后你将不得不重新初始化数据表。
