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给出了一些有关如何解决此问题的示例。您可以尝试类似...

[[302 23 102 15]
[34 56 34 340]
[34 32 69 54]
[231 89 32 34]]

...看看这是否符合您的期望。如果它检测到已初始化，则这基本上会破坏DataTable。

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

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

2 个答案: