データテーブルに進行状況バーを作成するにはどうすればよいですか?
P粉422227023
2023-08-26 21:01:16
<p>現在、大量のデータ (5000) を含むデータ テーブルを作成しています。データを漸進的なペースでロードできるようにするために、時間単位ごとにどれだけのデータがロードされたかを示す進行状況バーを追加しました。しかし、以下のコードはもう機能しません。</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">let handleProgressBar = (id, value, total) => {
let パーセント = Math.round((値 / 合計) * 10000) / 100;
$(id " > div").html(パーセント "%");
$(id " > div").css('width', パーセント "%");
}
let table = $('#data').DataTable();
fetch('https://jsonplaceholder.typicode.com/photos')
.then((res) => res.json())
.then((res) => {
res.forEach(async(data,index)=>{
table.row.add([
データ.id、
データ.アルバムID、
データ.タイトル、
データ.url
]);
handleProgressBar('#progress-bar', インデックス 1, res.length);
await 新しい Promise(r => setTimeout(r, 1)); // 1ミリ秒スリープします
});
table.draw();
});</pre>
<pre class="brush:css;toolbar:false;">.progress-bar-striped {
オーバーフロー: 非表示;
高さ: 20ピクセル;
マージン-ボトム: 20px;
背景色: #f5f5f5;
境界半径: 4px;
-webkit-box-shadow: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
ボックスシャドウ: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar-striped>div {
背景画像:線形グラデーション(45度、rgba(255、255、255、0.15)25%、透明25%、透明50%、rgba(255、255、255、0.15)50%、rgba(255、255、 255、0.15) 75%、透明 75%、透明);
背景サイズ: 40px 40px;
フロート: 左;
幅: 0%;
高さ: 100%;
フォントサイズ: 12px;
行の高さ: 20px;
色: #000000;
フォントの太さ: 太字;
テキスト整列: 中央;
-webkit-box-shadow: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
ボックスシャドウ: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
/*-webkit-transition: 幅 3 秒の容易さ;
-moz-transition: 幅 3 秒の緩和。
-o-transition: 幅 3 秒の緩和。
トランジション: 幅 3 秒の緩和;*/
アニメーション: プログレスバーストライプ 2 秒線形無限。
背景色: #288ade;
}
.progress-bar-striped p {
マージン: 0;
}
@keyframes プログレスバーストライプ {
0% {
背景位置: 40px 0;
}
100% {
背景位置: 0 0;
}
}</pre>
<pre class="brush:html;toolbar:false;"><link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="スタイルシート"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<div id="プログレスバー" クラス="プログレスバーストライプ">
<div style="幅: 0%;">
<p>0%</p>
</div>
</div>
<table id="data" class="テーブル表示テーブルの剥がし">
<頭>
<tr>
ID |
アルバム ID |
タイトル |
<th>URL 写真</th>
</tr>
</頭>
<tbody></tbody>
</table></pre>
<p><br /></p>
<p>テーブルは正常にロードされましたが、進行状況バーには <code>0%</code> から <code>100%</ まで増加するのではなく、<code>100%</code> と表示されます。コード>。以下のコードに示すように、データテーブルを使用しない場合に機能するかどうか (<em>ただし完全ではありません</em>) と考えていました。</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">let handleProgressBar = (id, value, total) => {
let パーセント = Math.round((値 / 合計) * 10000) / 100;
$(id " > div").html(パーセント "%");
$(id " > div").css('width', パーセント "%");
}
(async() =>{
n = 5000 とします。
handleProgressBar('#progress-bar', 0, n);
for(let i = 1; i <= n; i ) {
handleProgressBar('#progress-bar', i, n);
await 新しい Promise(r => setTimeout(r, 1)); // 1ミリ秒スリープします
}
})();
<pre class="brush:css;toolbar:false;">.progress-bar-striped {
オーバーフロー: 非表示;
高さ: 20ピクセル;
マージン-ボトム: 20px;
背景色: #f5f5f5;
境界半径: 4px;
-webkit-box-shadow: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
ボックスシャドウ: インセット 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar-striped>div {
背景画像:線形グラデーション(45度、rgba(255、255、255、0.15)25%、透明25%、透明50%、rgba(255、255、255、0.15)50%、rgba(255、255、 255、0.15) 75%、透明 75%、透明);
背景サイズ: 40px 40px;
フロート: 左;
幅: 0%;
高さ: 100%;
フォントサイズ: 12px;
行の高さ: 20px;
色: #000000;
フォントの太さ: 太字;
テキスト整列: 中央;
-webkit-box-shadow: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
ボックスシャドウ: インセット 0 -1px 0 rgba(0, 0, 0, 0.15);
/*-webkit-transition: 幅 3 秒の容易さ;
-moz-transition: 幅 3 秒の緩和。
-o-transition: 幅 3 秒の緩和。
トランジション: 幅 3 秒の緩和;*/
アニメーション: プログレスバーストライプ 2 秒線形無限。
背景色: #288ade;
}
.progress-bar-striped p {
マージン: 0;
}
@keyframes プログレスバーストライプ {
0% {
背景位置: 40px 0;
}
100% {
背景位置: 0 0;
}
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</スクリプト>
<div id="プログレスバー" クラス="プログレスバーストライプ">
<div style="幅: 0%;">
<p>0%</p>
</div>
</div></pre>
<p><br /></p>
</p>私たちはここに問題があるとは知りません。大量のデータを処理するための完全な方法を提供できるようにするために、事前に承認しました。
解決策を見つけました。間違いは、
res.forEach
の中にasync
という単語を入れたことです。これをfetch.then
の後に配置し、forEach
の代わりにfor
ループを使用すると、関数の実行の動作が変わり、正常に完了します。loadNumber
変数を使用すると、単位時間あたりにデータ テーブルにプロットされるデータの量を決定できます。