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?

Rohit Mittal · Accepted Answer · 2019-02-15T08:15:23.510

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.

You added this like correct? reportListDatatable = $('#report_list').DataTable({ and reportListDatatable.destroy(); — user9437856, Feb 15 '19 at 07:34
I added your code if I check first time then getting my datatable.. if I try second time then I am getting the output like https://prnt.sc/mld7s2 — user9437856, Feb 15 '19 at 07:38
And it's increaseing the total entries. I have only 126 records. — user9437856, Feb 15 '19 at 07:39
add alert or console.log in if condition like: if ($.fn.DataTable.isDataTable('#report_list')) { console.log('here'); reportListDatatable.destroy(); } this should appear of second selecttion. Let me if it is appearing or not? — Rohit Mittal, Feb 15 '19 at 07:40
Yes, first time I select working second time I choose then I got "here" in the console — user9437856, Feb 15 '19 at 07:43
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188457/discussion-between-rohit-mittal-and-user9437856). — Rohit Mittal, Feb 15 '19 at 07:47
i thinks this is the answer. because your code not really destroy the datatables instance — plonknimbuzz, Feb 15 '19 at 08:09
@RohitMittal, Can you help me out in this issue? https://stackoverflow.com/questions/63360592/search-and-pagination-not-working-while-using-server-side — user9437856, Aug 13 '20 at 04:07

score 0 · Answer 2 · answered Feb 13 '19 at 20:43

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.

Can you share more code because I am getting the still error. I updated the script in the question. — user9437856, Feb 15 '19 at 06:08
Is it the same error, same line? You might want to add some console.log() debug commands to determine where it occurs. — Bjoern, Feb 15 '19 at 09:43

Cannot reinitialise DataTable in AJAX response

2 Answers2