Не удается повторно инициализировать DataTable в ответе AJAX

Question

У меня есть выпадающий список и кнопка отправки.Пользователь выбирает из выпадающего списка и отправить.Тогда он назовет Аякс.Если найдены данные, то эти данные будут отображаться в таблице данных, в противном случае будет отображаться предупреждение «Данные не найдены».

Приведенный выше сценарий работает идеально для меня, но проблема заключается в том,

в первый раз мой ajax работает, если я выбрал второй раз из выпадающего списка, то я получаю сообщение об ошибке

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

Я пытался "bDestroy": true или $("#report_list").dataTable().fnDestroy();, но это не такработает безупречно.Ошибка идет, но мои данные ответа не отображаются.

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

Не могли бы вы помочь мне в этом вопросе?

Answer 1

Вы должны создать переменную и назначить datatable в этой переменной.Проверьте ниже код:

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

Надеюсь, это поможет вам.

Answer 2

Если я правильно прочитал ваш код, вы пытаетесь инициализировать новую таблицу данных каждый раз, когда ваш обработчик ajax возвращает что-то успешно.Это работает до тех пор, пока DataTable не инициализируется, но как только это произойдет, он выдаст ошибку, которую вы видите - поскольку она уже инициализирована.

Ручная запись , предоставленная вСообщение об ошибке дает несколько примеров того, как справиться с этим.Вы можете попробовать что-то вроде ...

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

... чтобы увидеть, идет ли это в том направлении, в каком вы хотите.Это в основном разрушает DataTable, если он обнаруживает, что он уже инициализирован.

Как только вы его запустите, я постараюсь улучшить это, не настраивая вашу HTML-таблицу вручную, а предоставив источник данных для DataTable.Поэтому вы можете избавиться от большей части jscript и позволить DataTable сделать эту работу за вас.И с этим вы можете избавиться от уничтожения и повторной инициализации DataTables, поскольку вы на самом деле не меняете его конфигурацию, а только отображаете данные.