質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,265

score 14

以下のサイトを参考に、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);
        }
    });
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+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 12:09

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

    キャンセル

checkベストアンサー

+1

HTML構造を書き換える前に一度削除(destroy)して、書き換え作業をした後、作り直す必要があると思います。

【destroy()】
https://datatables.net/reference/api/destroy()

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/12 12:03

    早速のご回答ありがとうございます。
    教えていただいた方法を試してみたところ、
    テーブルを書き換えてもソートできるようになりました。
    行き詰っておりましたので、非常に助かりました。
    本当にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る