如何更改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(); 
       } 
      }); 
     }); 
    });