Question

我当前的表有4列，我在其中绘制数据表，工作正常。现在点击一个按钮后，我从该数据表中删除第一列，然后我

datatable.clear().draw();
datatable.destroy()

在使用ajax调用获取新数据并使用它填充此新表之前。

<table class="display dataTable responsive event_table" cellspacing="0" role="grid">
              <thead class="table-heading">
                  <tr class="row-header-table">
                      <th class="name-col">Name</th>
                      <th>Created Date</th>
                      <th>Ending Date</th>
                      <th>Duration</th>
                      <th>Description</th>
                  </tr>
              </thead>
              <thead class="table-search hidden-xs">
                  <tr class="row-search-table">
                      <td class="name-col-data"><input type='text' data-column='0' class='search-input-field'></td>
                      <td><input type="text" data-column="1" class="search-input-field"/></td>
                      <td><input type="text" data-column="2" class="search-input-field"/></td>
                      <td><input type="text" data-column="3" class="duration-slider"/></td>
                      <td><select data-column="4" class="form-control description-list"><option value="">All</option></select></td>
                  </tr>
              </thead>
              <tfoot>
                  <tr class="row-header-table">
                      <th class="name-col">Name</th>
                      <th>Created Date</th>
                      <th>Ending Date</th>
                      <th>Duration</th>
                      <th>Description</th>
                  </tr>
              </tfoot>
          </table>

删除第一列的Jquery代码 -

$('.name-col').remove();
$('.name-col-data').remove();
$(".event_table tbody td:first-child").remove();

但是数据表正在抛出错误信息，说 -

DataTables warning: table id=DataTables_Table_0 - Requested unknown parameter '4' for row 0, column 4. For more information about this error, please see http://datatables.net/tn/4

Chrome控制台内部 -

datatables.min.js:89 Uncaught TypeError: Cannot read property 'style' of undefined

我在这里做错了什么？

Answer 1

您正在获取的错误消息是因为您的表定义中的列多于您在AJAX结果数据中的列。这与您获得的错误结果一致，即当您到达第五列时（当然从0开始），您不再在行中留下任何字段来填充它

您还没有在获取数据后共享用于重绘数据表的代码，并且您还没有共享您尝试填充数据的数据结构，因此我无法告诉你究竟是如何管理它的。但在重绘数据表之前，您很可能无法删除页眉和页脚元素。

因此，我会调查两件事，这两件事都会导致此错误：您对remove()的调用是否无法删除任何内容，以及您是否在删除页眉和页脚之前重新绘制表格元素。

此代码行表明后者：

$(".event_table tbody td:first-child").remove();

选择器不匹配HTML中的任何内容，因为您的内容中没有tbody元素。这表明当您尝试填充表时会添加它，就像在某些情况下那样。这意味着，您在尝试填充表格后尝试删除该列。

使用少一列重绘数据表

1 个答案: