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

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

ただいまの
回答率

87.58%

IE11におけるjQuery.dataTablesで大量行を追加し重くなっても別途用意したNowLoadingのgifアニメを動かし続けるにはどうすればよいでしょう?

受付中

回答 1

投稿

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

score 36

jQuery.dataTablesで大量行(2千行ぐらい)を追加する処理があるのですが、その際手持ちのIE11では表示を終えるまで10~20秒かかりました。
そこで、jQuery.dataTablesによる表示処理が完了するまでにはとりあえずNow Loading画面を用意してgif画像によるアニメーションでお茶を濁そうと考えました。
しかしながら、実際にやってみるとNow Loading画面を用意してもgif画像が途中で固まったままjQuery.dataTablesの表示準備が完了して画面切り替えの流れになってしまい、お茶を濁すことすらできず困っています。
jQuery.dataTablesの追加処理と、Now Loading画面のGifアニメをIE11でも並列して動作し続けるにはどうすればよいでしょうか?

なお、Now Loading画面のソースイメージはこんな感じで、jQuery.dataTablesの表示準備前後で表示非表示を切り替えています。

<div id="loader-bg">
    <div id="loader">
        <img src="load.gif" alt="Now Loading..." title="Now Loading...">
        <p>Now Loading...</p>
    </div>
</div>

jQuery.dataTablesの方は、ajaxで取得した内容を表示順に配列へ並び替えた上(output_data)で、以下のような感じで一気に反映しています。

var display_table = $("#display_table").dataTable().api();
display_table.clear();
display_table.rows.add(output_data);
display_table.draw();

環境は以下の通りです。

  • OS: Windows 10 Version 1909
  • ブラウザ: Windows 10付属のIE11
  • jquery-1.11.1
  • DataTables 1.10.5

以上よろしくおねがいします。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

+2

ご提示の内容から、やりたいのはこういうことなのかな?と想像してみました。
肝になるのは、

  • lodingの表示は、データ取得の前に実施
  • データ表示のコールバック関数内で、データの表示が終了したら、lodingの非表示

の部分になります。

このサンプルで6400件のデータをDataTableに差し込んでおり、Ajaxに2秒のディレイを意図的に入れていますが、
それほど時間はかからないので、いくらIEとはいえ、10秒以上はかなり時間がかかりますね。

IEでは確認できませんが、CODEPENにサンプル作成してあるので、
ほかのブラウザで動かしてみてください。

<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css" />
<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
<div class="wrap">
  <button id="loadStart" style="height:50px; margin-right:20px;">データ表示</button>
  <img id="loading" style="display: none;width:50px;height:50x;" src="https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif"/>
  <hr/>
  <table id="foo-table" class="table table-bordered">
    <thead>
      <tr>
        <th>index</th>
        <th>age</th>
        <th>firstname</th>
        <th>lastname</th>
      </tr>
    </thead>
  </table>
</div>
$(function() {

  //このgetData関数は強引に大きめのデータを作成するもので、回答とは直接関係ないです
  //データベースや、ajaxでデータを取得する関数のイメージです
  let getData = async function(callBack){
    let d = []
    await $.getJSON(
      'https://next.json-generator.com/api/json/get/NkubeCYTP?delay=2000',
      function(data) {
        d = data;
      });
    for (let i = 0; i < 6; i++) d = d.concat(d);
    callBack(d);
  }

  //↓ココからが実処理です↓
  //DataTableの初期化
  let dt = $("#foo-table").DataTable({
    columns: [
      { data: "index" },
      { data: "age" },
      { data: "firstname" },
      { data: "lastname" }
    ]
  });

  //ボタンが押されたときのイベント
  $("#loadStart").on("click", function() {
    //ローディングgifの表示と、ボタンの無効化
    $(this).prop('disabled', true);
    $("#loading").show();

    //DataTableのデータクリア
    dt.clear().draw();

    //データ取得とコールバック関数の指定
    getData(function(data){
      //DataTableにデータ挿入
      dt.rows.add(data);
      dt.columns.adjust().draw();

      //ローディングgifの非表示と、ボタンの活性化
      $("#loadStart").prop('disabled', false);
      $("#loading").hide();
    });

  });
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/12/14 14:42

    satoshi_tajimaさんありがとうございます。

    その後別の案件が入ってすぐには試せなくなったのですが、IE11で上手く動くのか早々に試させていただきます!

    キャンセル

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

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

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

  • トップ
  • JavaScriptに関する質問
  • IE11におけるjQuery.dataTablesで大量行を追加し重くなっても別途用意したNowLoadingのgifアニメを動かし続けるにはどうすればよいでしょう?