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();
  });

如果选中了标识为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

在修改后的代码中，您在jQuery fnDraw()对象上调用$('table') - 该对象没有关联的fnDraw()方法 - 而不是DataTable对象。

您需要在最初呼叫dataTable()的对象上拨打fnDraw()，如下所示：

$(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()。）

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

1 个答案: