datatables 再描画処理

困っていたこと

jQueryのdatatablesで、

ajaxによるデータ取得とテーブル描画（$("#table").find('tbody').append(tr_contents)で描画）とdatatablesへの変換を分離
「検索」ボタンでデータ再取得・テーブル再描画

ていう処理をしたいときに、datatablesの初期化がすんなりいかなかったのでメモ。

こうすると

var table = null;

  if (table) {
        // 二回目以降の描画の場合、初期化が必要
        $("#result-table tbody > tr").remove();
        table.state.clear();
    }

 // table描画処理

table = $("#result-table").DataTable({ 〜〜

テーブル自体の初期化は上手くいき、新たなデータでテーブルが作成されるが「○件中X~X件を表示」の部分が初回の情報のまま更新されない。

var table = null;

  if (table) {
        // 二回目以降の描画の場合、初期化が必要
        $("#result-table tbody > tr").remove();
        table.state.clear();
        table.destroy();
    }

 // table描画処理
table = $("#result-table").DataTable({ 〜〜

table.destroy()を追加すると、件数情報は更新されるのだがテーブルが初期化されず、初回に描画したテーブルに新たな行がどんどん追加されてしまう。

解決

var table = null;

  if (table) {
        // 二回目以降の描画の場合、初期化が必要
        table.state.clear();
        table.destroy();
        $("#result-table tbody > tr").remove();  // $("#result-table tbody").empty();で良い
    }

 // table描画処理
table = $("#result-table").DataTable({ 〜〜

tbodyを空にする処理のタイミングを変えたら実現できた。蓋を開けてみたらブログに書くほどのことでもないレベル！！でも下書きしてたので載せる。