How can I change the data of DataTables after it has been initialized?
<p>I want to populate a <a href="http://datatables.net/" rel="noreferrer">datatables</a> based on an ajax request.</p>

<p>Here is what I have done</p>

<pre><code>   $(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();

                }
            });

        });

    });

&lt;/script&gt;
</code></pre>

<p>The first request works with no problem. However, when I call the ajax request the second time, I get this error</p>

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

<p>How can I change the table content after it has been initialized?</p>

<p>I thought of initializing the datatable on the page loads, then call some event to populate it later with in my Ajax request. But, I need an event to call from my ajax request.</p>

<pre><code>    $(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' }
             ]
        });
    });
</code></pre>

<p>I tried to destroy the table before I reinitialize it, but that is not working.</p>

<pre><code>$('#reportTable').DataTable().destroy();
</code></pre>

<p><strong>UPDATED</strong></p>

<p>I found a way to add data to the table after I initialized it. But I need a way to clear the data first so I won't have duplicates data. </p>

<p>Here is what I have done to add data</p>

<pre><code>           var table = $('#reportTable').dataTable();

                table.fnAddData(json);
</code></pre>

<p>Te previous code keeps appending data to the table, but it does not clear existing data first causing duplicates. I tried to add before I add the following code <code>[table.clear().draw()][2]</code> but that gives me an error</p>

<blockquote>
  <p>TypeError: table.clear is not a function</p>
</blockquote>

<p>How can I correctly get the DataTable to change it's content over and over on the fly?</p>