无法在 AJAX 响应中重新初始化 DataTable

Question

我有一个选择下拉菜单和提交按钮。用户从选择下拉列表中选择并提交。然后它会调用ajax。如果找到数据，则该数据将显示在数据表中，否则将显示警报“未找到数据”。

上述方案对我来说非常有效，但问题是，

如果我从选择下拉列表中选择第二次，那么我的 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

您应该创建一个变量并在该变量中分配数据表。检查以下代码：

<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。只要 DataTable 没有被初始化，它就可以工作，但是一旦初始化，它就会抛出你看到的错误——因为它已经被初始化了。

manual entry provided within the error message 提供了一些关于如何应对此问题的示例。您可以尝试类似...

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

...看看这是否朝着您希望的方向发展。如果它检测到它已经初始化，这基本上会破坏 DataTable。

一旦您启动并运行它，我会尝试通过不手动设置您的 HTML 表格来改进这一点，而是为 DataTable 提供一个data source。因此，您可以摆脱大部分 jscript 并让 DataTable 为您完成这项工作。这样您就可以摆脱破坏和重新初始化 DataTables，因为您并没有真正改变它的配置，而只是改变它显示的数据。