重绘DataTable的正确方法？得到错误:"没有方法'fnDraw'"和"无法读取属性'oFeatures'"

Question

我继承了以下代码:

  // Show / Hide table rows from checkboxes
  $("table.data#report-table .warning").toggle($("#warning_checkbox").is(":checked"));
  $("#warning_checkbox").click(function() {
    $("table.data#report-table .warning").toggle($("#warning_checkbox").is(":checked"));
    $('.data_table#report-table').dataTable().fnDraw();
  });

选中带有id warning_checkbox的复选框时,它会显示/隐藏具有该类的行(实际上是tbody元素)table.data#report-table.warning

据我所知,'.data_table#report-table页面上没有元素 - 所以我认为某些东西不起作用.但是 - 它(神奇地？)确实如此,即表格按预期重新绘制,保留其正确的设置.但是,我在Chrome控制台中收到以下错误:

Uncaught TypeError: Cannot read property 'oFeatures' of null 

我认为可能是由于缺少元素(但那么它是如何工作的？)无论如何,我重写了代码作为函数,因为我需要在其他地方重用它:

  var checkbox_rows = function(checkbox_id, table_id, tbody_class) {
    var checkbox = $('div.buttons input[id$='+checkbox_id+']');
    var table = $('table.data[id$='+table_id+']');

    checkbox.click(function() {
      $('tbody[class$='+tbody_class+']', table).toggle(checkbox.is(':checked'));
      table.fnDraw();
    });
  }

  checkbox_rows('warning_checkbox', 'report-table', 'warning');

这也有效(对我来说更有意义) - 但现在我在Chrome控制台中收到了不同的错误:

Uncaught TypeError: Object [object Object] has no method 'fnDraw'

所以我的问题是,我做错了什么？重绘DataTable的正确方法是什么？

谢谢

Answer 1

在修改后的代码中,您将调用fnDraw()jQuery $('table')对象 - 它没有关联的fnDraw()方法 - 而不是DataTable对象.

您需要调用fnDraw()最初调用的对象dataTable(),如:

$(document).ready(function() {
  var oTable = $('#yourDataTable').dataTable();
  oTable.fnDraw();
});

所以这不起作用:

$(document).ready(function() {
  var oTable = $('#yourDataTable');
  oTable.fnDraw(); // Won't work, because the dataTable() method wasn't called above
});

如果您无法访问您呼叫的原始对象dataTable()上的任何更多的出于某种原因(很难说没有看到更多的代码的),你可以尝试通过调用重新初始化表dataTable()上table,并通过可选的bDestroy或bRetrieve,这取决于你所需要的.所以类似于:

table.dataTable({ "bRetrieve": true });

(老实说,我不确定你之后是否需要再打电话fnDraw().)