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

Question

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

以上场景对我来说很完美，但问题是，

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

如果我没看错你的代码，你会在每次 ajax 处理程序 returns 成功时尝试初始化一个新的 DataTable。只要 DataTable 未初始化，它就可以工作，但一旦初始化，它就会抛出您看到的错误 - 因为它已经初始化。

manual entry provided within the error message 给出了一些关于如何处理这个问题的例子。你可以尝试类似...

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

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

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

Answer 2

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

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

希望对你有帮助。

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

Cannot reinitialise DataTable in AJAX response

jquery

json

datatables

jquery-validate