質問: $("#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 以上よろしくおねがいします。
回答: ご提示の内容から、やりたいのはこういうことなのかな?と想像してみました。 肝になるのは、 * lodingの表示は、データ取得の前に実施 * データ表示のコールバック関数内で、データの表示が終了したら、lodingの非表示 の部分になります。 このサンプルで6400件のデータをDataTableに差し込んでおり、Ajaxに2秒のディレイを意図的に入れていますが、 それほど時間はかからないので、いくらIEとはいえ、10秒以上はかなり時間がかかりますね。 IEでは確認できませんが、CODEPENにサンプル作成してあるので、 ほかのブラウザで動かしてみてください。 ``` データ表示 index age firstname lastname ``` ``` $(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(); }); }); }); ```