无法在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，因为您并没有真正改变它的配置，而只是改变它显示的数据。