Cannot reinitialise DataTable in AJAX response

Question

I have a select dropdown and submit button. The user chooses from the select dropdown and submit. Then it will call the ajax. If found the data then that data will display in the data table otherwise it will display the alert "No data found".

Above scenario is working perfectly for me but the issue is,

The first time my ajax is working if I choose a second time from the select dropdown then I am getting the error

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

I tried "bDestroy": true or $("#report_list").dataTable().fnDestroy(); but it's not working perflectly. Error goes but my response data not displaying.

$("form[name='reports']").validate({
  rules: {
    report_type:{required:true}

  },
   // errorElement: 'div',
    submitHandler: function(form) {
        var report_type = $('#report_type').val();
        var fromDate = $('#fromDate').val();
        var toDate = $('#toDate').val(); 
        $.ajax({
            url: baseUrl + "/Reports_control/Get_reports",
            method: "POST",
            //dataType: "json", 
            data: {report_type: report_type,fromDate:fromDate,toDate:toDate},
            success: function(response) {
            $('.search_record tbody tr').hide();
                var data = JSON.parse(response);
          if (data.status === 'error')
             {
                $('.report').hide();
                alert(data.msg);

              } 

    if (data.status === 'success') {
       if ( $.fn.DataTable.isDataTable( '#report_list' ) ) {
    $('#report_list').destroy();
}
      //alert(data);
      $('.company_report').show();
                var trHTML = '';
                    $.each(data.records, function (i, o){
                    trHTML += '<tr><td>'+o.Sr_no+
                              '</td><td>' + o.cutomer_name +
                              '</td><td>' + o.o_product_brandname +
                              '</td><td>' + o.o_product_qty +
                              '</td><td>'+ o.o_order_no +
                              '</td><td>'+ o.created_by +
                              '</td><td>'+ o.order_status +
                              '</td><td>'+ o.action_order_status +
                              '</td></tr>';
                          });

                  $('.search_record tbody').append(trHTML);
                  $('#report_list').DataTable({
                      language: {
                            sLengthMenu: "Show _MENU_",// remove entries text
                            searchPlaceholder: "Search",
                            search:""
                          },
                        "ordering": false,  // remove sorting effect from header 
                      });
           }
         }
       });
}
    });

Would you help me out in this issue?

Answer 1

You should create a variable and should assign datatable in that variable. Check below code:

<script>
    var reportListDatatable = '';
    $("form[name='reports']").validate({
        rules: {
            report_type: {required: true}
        },
        submitHandler: function (form) {
            var report_type = $('#report_type').val();
            var fromDate = $('#fromDate').val();
            var toDate = $('#toDate').val();
            $.ajax({
                url: baseUrl + "/Reports_control/Get_reports",
                method: "POST",
                //dataType: "json", 
                data: {report_type: report_type, fromDate: fromDate, toDate: toDate},
                success: function (response) {
                    $('.search_record tbody tr').hide();
                    var data = JSON.parse(response);
                    if (data.status === 'error')
                    {
                        $('.report').hide();
                        alert(data.msg);

                    }

                    if (data.status === 'success') {


                        if ($.fn.DataTable.isDataTable('#report_list')) {
                            $('#report_list').dataTable().fnClearTable();
                            $('#report_list').dataTable().fnDestroy();
                        }



                        $('.company_report').show();
                        var trHTML = '';
                        $.each(data.records, function (i, o) {
                            trHTML += '<tr><td>' + o.Sr_no +
                                    '</td><td>' + o.cutomer_name +
                                    '</td><td>' + o.o_product_brandname +
                                    '</td><td>' + o.o_product_qty +
                                    '</td><td>' + o.o_order_no +
                                    '</td><td>' + o.created_by +
                                    '</td><td>' + o.order_status +
                                    '</td><td>' + o.action_order_status +
                                    '</td></tr>';
                        });

                        $('.search_record tbody').append(trHTML);
                        reportListDatatable = $('#report_list').DataTable({
                            language: {
                                sLengthMenu: "Show _MENU_", // remove entries text
                                searchPlaceholder: "Search",
                                search: ""
                            },
                            "ordering": false, // remove sorting effect from header 
                        });
                    }
                }
            });
        }
    });
</script>

Hope it helps you.

Answer 2

If I read your code properly, you're trying to initialize a new DataTable each time your ajax handler returns something succesfully. This works, as long as the DataTable isn't initialized, but once it is, it'll throw the error you're seeing - since it already is initialized.

The manual entry provided within the error message gives a few examples on how to cope with this. You could try something like...

if (data.status === 'success') {
    if ( $.fn.DataTable.isDataTable( '#report_list' ) ) {
        $('#report_list').destroy();
    }
    [...]

...to see if this goes into the direction you desire it to be. This basically destroys the DataTable if it detects it is already initialized.

Once you have it up and running, I'd try to improve this by not setting up your HTML table manually, but provide a data source for the DataTable. Therefore you could get rid of most of the jscript and let DataTable do this work for you. And with that you could get rid of destroying and reinitializing the DataTables, since you're not really changing the configuration of it, but only the data it displays.