当社のサーバーでは、HTML内に約1000行のデータを含む<table>要素がレンダリングされています。クライアントJSは、このHTML dataからDataTableを初期化します。ただし、クライアントでは、DataTableが完全に初期化され、ページ番号が表示されるまでに約3〜5秒かかります。この間、DOMでは1000行がレンダリングされ、表示されます。私はDataTableのマニュアルでそれを見つけられませんでしたが、dom HTMLを処理する際にdatatableの処理中に "処理中"のメッセージやスピナーを表示する方法がありますか？jQuery-DataTablesでHTMLソースデータのspinner/loading-msgを表示することはできますか？
このオプションは、ajaxまたはサーバー側の処理元で使用できますが、HTMLデータソースでは見つかりませんでした。
データテーブルの設定で以下のオプションを追加しました。
"processing": true & oLanguage: {sProcessing: "<div id='loader'></div>"}
テーブルIDが「example」であるとします。
JSコード：ローダーの
$('#example').DataTable({
"processing": true,
responsive: true,
oLanguage: {sProcessing: "<div id='loader'></div>"}
});
はCSS：
#loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin-left:200px;
margin-top:30px;
}
注：
：あなたは下のリンクを訪問し協力たとえば、あなたのDataTableごとにCSSを調整しています
DataTableを初期化しているときにページが遅れたり凍結したりするため、スピナーはおそらくこの場合は悪い考えです。しかし、DataTableを初期化する直前に、砂時計などの静的ローディングメッセージを表示することもできます。その後、msgを削除してください。 –
私の質問は、なぜそのデータをレンダリングするのに時間がかかりますかということです。簡単に – Bindrid
の1000行DataTablesは、おそらくオーバーヘッドの多くを作成し、いくつかの並べ替えを行う、それが追加される可能性があります...私はあなたのコードを見ることなく本当に言うことができません。 –