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

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.

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