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

変更したコードでは、DataTableオブジェクトの代わりに、関連付けられたメソッドがないfnDraw()jQuery$('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()何らかの理由で呼び出した元のオブジェクトにアクセスできない場合（コードを詳しく表示せずに言うのは難しい）、必要に応じて呼び出しdataTable()、オプションでまたはtableを渡してテーブルを再初期化してみてください。だから次のようなもの：bDestroybRetrieve

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

fnDraw()（その後、もう電話する必要があるかどうかは正直わかりません。）

于 2013-02-15T12:31:46.283 に答える