How can I change the data of DataTables after it has been initialized?

Question

I want to populate a datatables based on an ajax request.

Here is what I have done

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

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

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

How can I change the table content after it has been initialized?

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.

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

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

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

UPDATED

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.

Here is what I have done to add data

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

                table.fnAddData(json);

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 [table.clear().draw()][2] but that gives me an error

TypeError: table.clear is not a function

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

Answer 1

DataTables has provided an option by using destroy:true, which will destroy the previous data and re-initialize it! I am working with WordPress as well and it works perfectly. If anyone faces such problem, you can simply try this solution. Hope this helps, cheers!

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

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

                    $('#reportTable').DataTable({
                        destroy: true,   <======= Add this to remove previous table
                        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();
                }
            });
        });
    });

Answer 2

To use table.clear(), use DataTable() instead of dataTable()

dataTable returns a jquery object, where as DataTable returns the datatables object

I've also ran into this issue, and they way i have handled it was just to destroy everything and recreate it, but performance wasn't super critical for this task.