Как разрушить datatable?

Question

Я использую 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%"} 
             ] 
        }); 
} 

Answer 1

Чтобы полностью удалить и удалить DataTable объект с его DOM элементов необходимо:

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

Answer 2

Просто добавьте этот параметр к вашей декларации:

"bDestroy" : true,

Тогда, когда вы хотите «воссоздать» t в связи с этим не будет происходить ошибка

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

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

Это должно уничтожить dataTable, тогда вам придется повторно инициализировать dataTable.

Answer 4

Я знаю, что это старый вопрос, но так как я столкнулся с подобной проблемой и разрешил ее.

Следующее должно сделать трюк (комментарии исходят от 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 5

Для DataTables 1,10, звонки:

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

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

Answer 6

На DataTables 1.10 и выше вы можете использовать "destroy": true

Читать подробнее here

Answer 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 

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 
     }); 
    }); 
}); 

Надеется, что это поможет