4

我继承了以下代码：

  // 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 的正确方法是什么？

谢谢

4

1 回答 1

7

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

您需要调用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()（很难说没有看到更多代码），您可以尝试通过调用并可选地传入ordataTable()来重新初始化表，具体取决于您的需要。所以像：tablebDestroybRetrieve

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

(I'm honestly not sure whether you'd need to call fnDraw() any more after that.)

于 2013-02-15T12:31:46.283 回答