Làm thế nào để phá hủy một datatable?

Question

Tôi đang sử dụng datatables và sử dụng bootstrap-daterangepicker để chọn phạm vi dữ liệu sẽ được hiển thị trong Biểu dữ liệu.

Nó hoạt động tốt.

Vấn đề là khi tôi chọn một phạm vi mới trong daterangepicker, nó cung cấp cho tôi chức năng gọi lại nơi tôi có thể thực hiện công cụ của mình. Trong hàm gọi lại đó, tôi đang gọi lại Datatables. Nhưng kể từ khi bảng đã được tạo ra, làm thế nào tôi có thể phá hủy các bảng trước đó và hiển thị một cái mới ở vị trí của nó?

Vui lòng trợ giúp. Tôi bị kẹt. :(

EDIT: Tôi đã đoạn mã sau:

$(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

Để xóa hoàn toàn và loại bỏ các đối tượng DataTable với các yếu tố DOM của nó bạn cần phải:

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

Answer 2

Chỉ cần thêm tham số này vào tuyên bố của bạn:

"bDestroy" : true,

Sau đó, bất cứ khi nào bạn muốn "tạo lại" tab le nó sẽ không thả một lỗi

P.S. Bạn có thể tạo một hàm để lấy các tham số bắt buộc và sau đó khởi tạo lại bảng với các tùy chọn khác nhau khi chạy.

Ví dụ tôi sử dụng một trong các chương trình của tôi, nếu nó giúp bạn có thể thích ứng với nhu cầu của bạn

 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.

Answer 3

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

điều này sẽ phá hủy dataTable, sau đó bạn sẽ phải khởi tạo lại dataTable.

Answer 4

Tôi biết đây là một câu hỏi cũ, nhưng kể từ khi tôi gặp phải một vấn đề tương tự và giải quyết nó.

Sau đây nên thực hiện thủ thuật (các nhận xét đến từ 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

Đối với DataTables 1.10, các cuộc gọi là:

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

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

Answer 6

On DataTables 1.10 trở lên bạn có thể sử dụng "destroy": true

Đọc thêm chi tiết here

Answer 7

Đối với người tìm kiếm google

Rất khó tôi quản lý để tiêu diệt các Datatable, rỗng đó là tất cả dữ liệu trước đó trước khi tải dữ liệu mới và tái khởi tạo DataTable bằng cách làm như thế này,

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

... 

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

Answer 8

Từ DataTable

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

Nạp lại mô tả bảng đầy đủ từ máy chủ, bao gồm các cột:

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

Hy vọng nó sẽ giúp