Question

这是流程，用户单击提交，根据他的选择，填充数据表。他在表单上更改了一些内容，此数据表应该更新。注意：列数可能随后续提交而变化。

var bk_dataset = []

$.ajax({
  type: "POST",
  cache: false,
  url: "/booking-granular/callback-from-js-bk",
  data: postData

}).done(function(data) {
  bk_dataset = data.query_res;
  $('#bk_grid').DataTable({
    destroy: true,
    data: bk_dataset,
    columns: titleArray
  });
  $('#bk_showquery').text(data.query);
  document.getElementById('bk_mailButton').classList.remove("mailbutton");
  document.getElementById('bk_loader_image').classList.add("onload");
  document.getElementById('bk_loader_image').classList.remove("onshow");
  $("#bk_granular_tab").find("*").prop("disabled", false);

}).fail(function(xhr, result, status) {
  alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
});

bk_dataset和titleArray是在提交请求中动态创建的预填充数组。当我第一次加载Datatable时，它可以正常工作。

问题是，当我使用比上次更多的列进行第二次ajax调用时，它会出错：

Uncaught TypeError: Cannot read property 'style' of undefined

我尝试了几种解决方案，但没有任何效果。我认为它与列数有关，因为当我提交与之前相同数量的列时，它可以工作。

Answer 1

我知道戴维（David）的案子已经过时了，但是本周使用CDN版本的Datatables发生了这件事，我做了一个简单的解决方案，想法是每次删除并创建，就像这样：

HTML

<div id="table">
   <table id="example" class="table"></table>
   <div id="example_wrapper" class="table"></div>
</div>

JavaScript

function delete_table() {
   var table = document.getElementById("example");
   if (table) table.remove();
   var table_w = document.getElementById("example_wrapper");
   if (table_w) table_w.remove();
}

function create_table() {
    var table = document.createElement("table");
    table.setAttribute("id", "example");
    table.setAttribute("class", "table table-striped");
    var id = document.getElementById("table");
    id.appendChild(table);
  }

function draw_table(data) {
   delete_table();
   create_table();

   $(document).ready(function () {
      $('#example').dataTable({
         "sorting": false,
         "searching": false,
         "paging": false,
         "info": false,
         "data": data.data,
         "columns": data.columns
      });
   });
}

example-wrapper也必须销毁，否则每次删除表时，它将保留在文档中，因此为了节省内存，最好将其删除。这样可以处理具有不同列数的动态表。

Jquery DataTable不会重新加载

1 个答案: