DataTables（jQuery）をタイマー処理で更新した際にソートが機能しません

以下のサイトを参考に、DataTablesを使用して、DBから取得したデータを表示するテーブルのソート機能を実装しましたが、
DBにデータを追加した際、タイマー処理でtheadとtbodyを書き換えて表示を更新すると、ソートが機能しなくなってしまいます。

＜参考サイト＞
https://qiita.com/nissuk/items/7ac59af5de427c0585c5

もし解決策をおわかりの方がおられましたら、ご教授いただけると幸いです。

何卒よろしくお願い申し上げます。

ソースコード

■HTML

<table id="foo-table">
  <thead>
    <tr>
      <th>No</th>
      <th>都道府県</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>北海道</td>
    </tr>
    <tr>
      <td>47</td>
      <td>沖縄県</td>
    </tr>
  </tbody>
</table>

■JavaScript

var thead_init = null;
$(document).ready(function() {
	$('#krt213Tbl').DataTable({
		searching: false,
		info: false,
		paging: false,
		order: []
	});
	thead_init = $('thead').html();
	setInterval(timer, 5000);
});

function timer() {
	$.ajax({
		url: "mainForm/list",
		type: "POST",
		data: JSON.stringify($('#formData').serializeArray();),
		contentType: "application/json; charset=UTF-8",
		dataType: "html",
		success: function(response) {
			$('thead').html(thead_init);
			$('tbody').html($('tbody', response).html());
		},
		error: function(e) {
			console.log(e);
		}
	});
}

行動規範の内容に同意します

回答2件

DataTables はデータの更新をリアルタイムで監視しているわけではありません。
そのため、HTML を書き換えるとデータの整合性が取れなくなり、DataTables は正しく機能しなくなります。
（たぶん、書き換える前の状態の HTML のデータで動作するか、完全にバグるかすると思います。）
データの更新を行う際は、DataTables の API を利用して行う必要があります。

ただし、DataTables のマニュアルをざっと見た感じでは、HTML を丸ごと書き換える方法には対応していないと思われます。
なので、改変は容易ではありません（単に自分が見逃しているだけという可能性もありますが）。
一応、destroy して、HTML を書き換えて、dataTable を作り直す、という強引な方法でデータの更新だけは容易に行えますが、そのやり方だとデータ更新のたびにソート順等もすべてリセットされてしまいます。

row.add() や row().remove() を使うやり方がソート順等も保てる正攻法だと思いますが、それを行うためには、ajax の仕様を変えたり、$.ajax の success の関数の中を大幅に変えたりする必要があります。
destroy を使う方法でも、destroy の前にソート順を記憶しておき、dataTable を作り直した後に記憶しておいた順番通りに並べ替える、という方法もありますが、これもかなりの量のコードの追加が必要です。
いずれにしろ、回答の範疇を超えるほどのコード量になると思われるため、具体的なコードは回答不能です。

なお、もしも要求仕様を変えてもいいのであれば、タイマーでデータの変更の有無だけを監視しておき、データの変更を検知したらユーザーにページをリロードするように促す、というやり方が最も楽だとは思います。

投稿2019/11/12 02:42

2KOH

総合スコア999

programmer010

2019/11/12 03:09

詳細なご回答ありがとうございます。記載してくださっている通り、データ更新のたびにソート順もすべてリセットされてしまいます。ソート順を保持しておくのがベストなのですが、大幅な改造が必要そうですので、タイマーでデータの変更の有無を監視して、変更があった際はソート順はリセットされますが、テーブルを更新するようにしました。

行動規範の内容に同意します