我正在使用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%"}
]
});
}
答案 0 :(得分:29)
要完全删除和删除带有DOM元素的datatable对象,您需要:
//Delete the datable object first
if(oTable != null)oTable.fnDestroy();
//Remove all the DOM elements
$('#feedback-datatable').empty();
答案 1 :(得分:13)
只需将此参数添加到您的声明中:
"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 }
伊凡。
答案 2 :(得分: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();
答案 3 :(得分:7)
对于DataTables 1.10,调用是:
// Destroy dataTable
$('#feedback-datatable').DataTable.destroy();
// Remove DOM elements
$('#feedback-datatable').empty();
答案 4 :(得分:2)
对于Google搜索者
我很难设法销毁Datatable
,在加载新数据之前清空所有以前的数据,并通过这样做重新初始化Datatable,
if ($.fn.DataTable.isDataTable("#myTbl")) {
("#myTbl").DataTable().destroy();
}
$('#myTbl tbody > tr').remove();
...
// Load table with new data and re-initialize Datatable
答案 5 :(得分:1)
$('#feedback-datatable').dataTable().fnDestroy();
这应该破坏dataTable,然后你将不得不重新初始化dataTable。
答案 6 :(得分:1)
在DataTables 1.10及更高版本上,您可以使用"destroy": true
了解详情here
答案 7 :(得分:0)
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
} );
} );
});
希望它会有所帮助