Ответ 1
Чтобы полностью удалить и удалить объект datatable с его элементами DOM, вам необходимо:
//Delete the datable object first
if(oTable != null)oTable.fnDestroy();
//Remove all the DOM elements
$('#feedback-datatable').empty();
Как уничтожить данные?
Я использую datatables и используя bootstrap-daterangepicker, чтобы выбрать диапазон, для которого данные будут отображаться в Datatables.
Он отлично работает.
Проблема в том, что когда я выбираю новый диапазон в daterangepicker, он предоставляет мне функцию обратного вызова, где я могу делать свои вещи. В этой функции обратного вызова я снова вызываю Datatables. Но поскольку таблица уже создана, как я могу уничтожить предыдущую таблицу и показать новую в ней?
Незлая помощь. Я застрял.: (
EDIT: У меня есть следующий код:
$(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%"}
]
});
}
Ответы
Ответ 2
Просто добавьте этот параметр в свое объявление:
"bDestroy" : true,
Затем всякий раз, когда вы хотите "воссоздать" таблицу, она не выведет ошибку.
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
}
Иван.
Ответ 3
Для DataTables 1.10 вызовы:
// Destroy dataTable
$('#feedback-datatable').DataTable.destroy();
// Remove DOM elements
$('#feedback-datatable').empty();
Ответ 4
Я знаю, что это старый вопрос, но так как я столкнулся с подобной проблемой и решил ее.
Следующее должно сделать трюк (комментарии поступают из DataTable API doc).
// Quickly and simply clear a table
$('#feedback-datatable').dataTable().fnClearTable();
// Restore the table to it 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();
Ответ 5
$('#feedback-datatable').dataTable().fnDestroy();
это должно уничтожить dataTable, тогда вам придется повторно инициализировать dataTable.
Ответ 6
В DataTables 1.10 и выше вы можете использовать "destroy": true
Подробнее здесь
Ответ 7
Для поисковиков Google
Мне очень легко удалось уничтожить Datatable, очистить все предыдущие данные перед загрузкой новых данных и повторной инициализацией Datatable, сделав вот так:
if ($.fn.DataTable.isDataTable("#myTbl")) {
("#myTbl").DataTable().destroy();
}
$('#myTbl tbody > tr').remove();
...
// Load table with new data and re-initialize Datatable
Ответ 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
} );
} );
});
Надеюсь, что это поможет