如何更改DataTables初始化後的數據？

Question

我想根據ajax請求填充datatables。

這裏是我做了什麼

$(function(e) { 

     $('#CampaignMenu').change(function(e) { 

      $('#ReportWrapper').hide(); 


      if ( $(this).val() != '0') { 
       $('#DisplayReport').attr('disabled', false); 
      } else { 
       $('#DisplayReport').attr('disabled', true); 
      } 

     }); 

     $('#DisplayReport').click(function (e) { 

      $.ajax({ 
       type: 'GET', 
       url: '/getdata', 
       data: { 'campaign_id': $('#CampaignMenu').val() }, 
       dataType: 'json', 
       success: function (json) { 

        $('#reportTable').DataTable({ 
         data: json, 
         pageLength: 50, 
         lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000], 
         searching: false, 
         order: [ [ 2, 'desc' ] ], 
         columns: [ 
          { data: 'chain_name', title: 'Chain Name' }, 
          { data: 'store_id' , title: 'Store Number' }, 
          { data: 'completed', title: 'Total Surveys Completed' }, 
          { data: 'initial_quota', title: 'Target Surveys To Complete' }, 
          { data: 'total_callable', title: 'Total Call In The Dialer Queue' }, 
          { data: 'current_status', title: 'Current Quota Status' }, 
         ] 
        }); 

        $('#ReportWrapper').show(); 

       } 
      }); 

     }); 

    }); 

</script> 

的第一個請求工作沒有問題。但是，當我第二次調用ajax請求時，出現此錯誤

DataTables warning: table id=reportTable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 

如何在表格內容初始化後進行更改？

我想在頁面加載時初始化數據表，然後調用一些事件以便稍後在我的Ajax請求中填充它。但是，我需要一個事件來調用我的ajax請求。

$(window).load(function (e) { 

     $('#reportTable').DataTable({ 
      pageLength: 50, 
      lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000], 
      searching: false, 
      order: [ [ 2, 'desc' ] ], 
      columns: [ 
       { data: 'chain_name', title: 'Chain Name' }, 
       { data: 'store_id' , title: 'Store Number' }, 
       { data: 'completed', title: 'Total Surveys Completed' }, 
       { data: 'initial_quota', title: 'Target Surveys To Complete' }, 
       { data: 'total_callable', title: 'Total Call In The Dialer Queue' }, 
       { data: 'current_status', title: 'Current Quota Status' } 
      ] 
     }); 
    }); 

我試圖在我重新初始化它之前銷燬表，但那不起作用。

$('#reportTable').DataTable().destroy(); 

修訂

我找到了一種方法將數據添加到表後，我初始化它。但我需要一種方法來清除數據，所以我不會有重複的數據。

這是我做了補充數據

  var table = $('#reportTable').dataTable(); 

       table.fnAddData(json); 

特以前的代碼保存數據追加到表中，但它並不清楚現有的數據首先引起重複。我試過之前，我添加以下代碼[table.clear().draw()][2]增加但給我一個錯誤

TypeError: table.clear is not a function

我怎樣才能正確地得到DataTable中一遍又一遍地在運行中改變它的內容？

Answer 1

要使用table.clear（），使用DataTable()代替dataTable()

dataTable返回一個jQuery對象，其中如DataTable返回的DataTable對象

我也遇到了這個問題，他們的方式我處理它只是爲了摧毀一切並重新創建它，但是對於這個任務來說，性能並不是非常關鍵的。

Answer 2

DataTables通過使用destroy：true提供了一個選項，它將破壞以前的數據並重新初始化它！我也使用WordPress以及它完美的作品。如果有人面臨這樣的問題，你可以簡單地嘗試這個解決方案希望這有助於，歡呼！

$('#DisplayReport').click(function (e) { 

      $.ajax({ 
       type: 'GET', 
       url: '/getdata', 
       data: { 'campaign_id': $('#CampaignMenu').val() }, 
       dataType: 'json', 
       success: function (json) { 

        $('#reportTable').DataTable({ 
         destroy: true, 
         data: json, 
         pageLength: 50, 
         lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000], 
         searching: false, 
         order: [ [ 2, 'desc' ] ], 
         columns: [ 
          { data: 'chain_name', title: 'Chain Name' }, 
          { data: 'store_id' , title: 'Store Number' }, 
          { data: 'completed', title: 'Total Surveys Completed' }, 
          { data: 'initial_quota', title: 'Target Surveys To Complete' }, 
          { data: 'total_callable', title: 'Total Call In The Dialer Queue' }, 
          { data: 'current_status', title: 'Current Quota Status' }, 
         ] 
        }); 
        $('#ReportWrapper').show(); 
       } 
      }); 
     }); 
    });