Bagaimana untuk membuat bar kemajuan dalam jadual data?
P粉422227023
2023-08-26 21:01:16
<p>Saya sedang mengusahakan jadual data yang mengandungi sejumlah besar data (5000). Untuk dapat memuatkan data yang sedang berjalan, saya menambah bar kemajuan yang menggambarkan jumlah data yang telah dimuatkan setiap unit masa. Tetapi kod di bawah tidak lagi berfungsi.</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">biarkan handleProgressBar = (id, nilai, jumlah) => {
biarkan peratus = Math.round((nilai / jumlah) * 10000) / 100;
$(id + " > div").html(peratus + "%");
$(id + " > div").css('lebar', peratus + "%");
}
biarkan jadual = $('#data').DataTable();
ambil ('https://jsonplaceholder.typicode.com/photos')
.then((res) => res.json())
.then((res) => {
res.forEach(async(data, indeks)=>{
table.row.add([
data.id,
data.albumId,
data.title,
data.url
]);
handleProgressBar('#progress-bar', indeks+1, res.length);
tunggu Janji baharu(r => setTimeout(r, 1)); // tidur 1 ms
});
table.draw();
});</pre>
<pre class="brush:css;toolbar:false;">.progress-bar-striped {
limpahan: tersembunyi;
ketinggian: 20px;
jidar bawah: 20px;
warna latar belakang: #f5f5f5;
jejari sempadan: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
bayang-kotak: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar-striped>div {
imej latar belakang: kecerunan linear(45deg, rgba(255, 255, 255, 0.15) 25%, lutsinar 25%, lutsinar 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, telus 75%, telus);
saiz latar belakang: 40px 40px;
terapung: kiri;
lebar: 0%;
ketinggian: 100%;
saiz fon: 12px;
ketinggian garis: 20px;
warna: #000000;
font-weight: tebal;
text-align: tengah;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
bayang-kotak: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
/*-webkit-transition: lebar 3s mudah;
-moz-transition: lebar 3s mudah;
-o-peralihan: lebar 3s mudah;
peralihan: lebar 3s mudah;*/
animasi: progress-bar-stripes 2s linear infinite;
warna latar belakang: #288ade;
}
.progress-bar-belang p {
margin: 0;
}
@keyframes progress-bar-stripes {
0% {
kedudukan latar belakang: 40px 0;
}
100% {
kedudukan latar belakang: 0 0;
}
}</pra>
<pre class="brush:html;toolbar:false;"><link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel=" lembaran gaya"/>
<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="progress-bar" class="progress-bar-striped">
<div style="width: 0%;">
<p>0%</p>
</div>
</div>
<table id="data" class="table display table-stripped">
<kepala>
<tr>
<th>ID</th>
<th>ID Album</th>
<th>Tajuk</th>
<th>Foto URL</th>
</tr>
</kepala>
<tbody></tbody>
</table></pre>
<p><br /></p>
<p>Jadual berjaya dimuatkan, tetapi bar kemajuan menunjukkan <kod>100%</kod> kod>. Saya tertanya-tanya sama ada ia akan berfungsi (<em>tetapi tidak sempurna</em>) jika saya tidak menggunakan jadual data, seperti yang ditunjukkan dalam kod di bawah.</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">biarkan handleProgressBar = (id, nilai, jumlah) => {
biarkan peratus = Math.round((nilai / jumlah) * 10000) / 100;
$(id + " > div").html(peratus + "%");
$(id + " > div").css('lebar', peratus + "%");
}
(async() =>{
biarkan n = 5000;
handleProgressBar('#progress-bar', 0, n);
untuk(biar i = 1; i <= n; i++) {
handleProgressBar('#progress-bar', i, n);
tunggu Janji baharu(r => setTimeout(r, 1)); // tidur 1 ms
}
})();</pra>
<pre class="brush:css;toolbar:false;">.progress-bar-striped {
limpahan: tersembunyi;
ketinggian: 20px;
jidar bawah: 20px;
warna latar belakang: #f5f5f5;
jejari sempadan: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
bayang-kotak: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar-striped>div {
imej latar belakang: kecerunan linear(45deg, rgba(255, 255, 255, 0.15) 25%, lutsinar 25%, lutsinar 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, telus 75%, telus);
saiz latar belakang: 40px 40px;
terapung: kiri;
lebar: 0%;
ketinggian: 100%;
saiz fon: 12px;
ketinggian garis: 20px;
warna: #000000;
font-weight: tebal;
text-align: tengah;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
bayang-kotak: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
/*-webkit-transition: lebar 3s mudah;
-moz-transition: lebar 3s mudah;
-o-peralihan: lebar 3s mudah;
peralihan: lebar 3s mudah;*/
animasi: progress-bar-stripes 2s linear infinite;
warna latar belakang: #288ade;
}
.progress-bar-belang p {
margin: 0;
}
@keyframes progress-bar-stripes {
0% {
kedudukan latar belakang: 40px 0;
}
100% {
kedudukan latar belakang: 0 0;
}
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</skrip>
<div id="progress-bar" class="progress-bar-striped">
<div style="width: 0%;">
<p>0%</p>
</div>
</div></pre>
<p><br /></p>
<p>我不知道错误出在哪里。谁能为我提供处理大量数据的数据表进度松的家。</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya dah jumpa penyelesaiannya. Kesilapannya ialah saya menyediakan pembolehubah
async一词放在res.forEach中。当我将其放在fetch.then之后并使用for循环而不是forEach时，函数执行的行为发生了变化并且可以成功完成。loadNumberuntuk menentukan jumlah data yang akan diplotkan dalam jadual data bagi setiap unit masa.let handleProgressBar = (id, value, total) => { let percent = Math.round((value / total) * 10000) / 100; $(id + " > div").html(percent + "%"); $(id + " > div").css('width', percent + "%"); } let table = $('#data').DataTable({ dom: 'ilpftr' }); fetch('https://jsonplaceholder.typicode.com/photos') .then((res) => res.json()) .then(async(res) => { let loadNumber = 50; for(let i = 0; i < res.length; i++) { table.row.add([ res[i].id, res[i].albumId, res[i].title, res[i].url ]); if (i % loadNumber == 0) { table.draw(); handleProgressBar('#progress-bar', i+1, res.length); await new Promise(r => setTimeout(r, 1)); // sleep 1 ms } } table.draw(); handleProgressBar('#progress-bar', res.length, res.length); });.progress-bar-striped { overflow: hidden; height: 20px; margin-bottom: 20px; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress-bar-striped>div { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; float: left; width: 0%; height: 100%; font-size: 12px; line-height: 20px; color: #000000; font-weight: bold; text-align: center; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); /*-webkit-transition: width 3s ease; -moz-transition: width 3s ease; -o-transition: width 3s ease; transition: width 3s ease;*/ animation: progress-bar-stripes 2s linear infinite; background-color: #288ade; } .progress-bar-striped p { margin: 0; } @keyframes progress-bar-stripes { 0% { background-position: 40px 0; } 100% { background-position: 0 0; } }<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet"/> <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="progress-bar" class="progress-bar-striped"> <div style="width: 0%;"> <p>0%</p> </div> </div> <table id="data" class="table display table-stripped"> <thead> <tr> <th>ID</th> <th>Album ID</th> <th>Title</th> <th>URL Photo</th> </tr> </thead> <tbody></tbody> </table>