<p>Je travaille actuellement sur un tableau de données contenant une grande quantité de données (5000). Pour pouvoir charger les données en cours, j'ai ajouté une barre de progression qui illustre la quantité de données chargées par unité de temps. Mais le code ci-dessous ne fonctionne plus.</p> <p><br /></p> <pre class="brush:js;toolbar:false;">let handleProgressBar = (id, valeur, total) => { soit percent = Math.round((valeur / total) * 10000) / 100 ; $(id + " > div").html(pourcentage + "%"); $(id + " > div").css('width', percent + "%"); } let table = $('#data').DataTable(); récupérer('https://jsonplaceholder.typicode.com/photos') .then((res) => res.json()) .then((res) => { res.forEach(async(data, index)=>{ table.row.add([ data.id, data.albumId, données.titre, données.url ]); handleProgressBar('#progress-bar', index+1, res.length); attendre une nouvelle promesse(r => setTimeout(r, 1)); // dort 1 ms }); table.draw(); });</pré> <pre class="brush:css;toolbar:false;">.progress-bar-striped { débordement caché; hauteur : 20px ; marge inférieure : 20 px ; couleur d'arrière-plan : #f5f5f5 ; rayon de bordure : 4 px ; -webkit-box-shadow : encart 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow : encart 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow : encart 0 1px 2px rgba(0, 0, 0, 0.1); } .progress-bar-striped>div { image d'arrière-plan : dégradé linéaire (45 degrés, 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) ; taille de l'arrière-plan : 40px 40px ; flotteur : gauche ; largeur : 0 % ; hauteur : 100 % ; taille de police : 12 px ; hauteur de ligne : 20 px ; couleur : #000000 ; poids de la police : gras ; alignement du texte : centre ; -webkit-box-shadow : encart 0 -1px 0 rgba(0, 0, 0, 0.15) ; -moz-box-shadow : encart 0 -1px 0 rgba(0, 0, 0, 0.15) ; box-shadow : encart 0 -1px 0 rgba(0, 0, 0, 0.15); /*-webkit-transition : largeur 3s facilité ; -moz-transition : largeur 3s facilité ; -o-transition : largeur 3s facilité ; transition : largeur 3s facilité ;*/ animation : progression-bar-stripes 2s linéaire infini ; couleur d'arrière-plan : #288ade ; } .progress-bar-striped p { marge : 0 ; } @keyframes progression-bar-stripes { 0% { position d'arrière-plan : 40px 0 ; } 100 % { position d'arrière-plan : 0 0 ; } }≪/pré> <pre class="brush:html;toolbar:false;"><link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel=" feuille de style"/> <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="largeur : 0%;"> <p>0 %</p> </div> </div> <table id="data" class="table display table-stripped"> <tête> <tr> <th>ID</th> <th>ID de l'album</th> <th>Titre</th> <th>URL Photo</th> ≪/tr> ≪/tête> <tbody></tbody> </table></pre> <p><br /></p> <p>Le tableau a été chargé avec succès, mais la barre de progression affiche <code>100%</code> au lieu d'incrémenter de <code>0%</code> à <code>100%</ code>. Je me demandais si cela fonctionnerait (<em>mais pas parfaitement</em>) si je n'utilisais pas de table de données, comme indiqué dans le code ci-dessous.</p> <p><br /></p> <pre class="brush:js;toolbar:false;">let handleProgressBar = (id, valeur, total) => { soit percent = Math.round((valeur / total) * 10000) / 100 ; $(id + " > div").html(pourcentage + "%"); $(id + " > div").css('width', percent + "%"); } (async() =>{ soit n = 5000 ; handleProgressBar('#progress-bar', 0, n); pour (soit i = 1; i <= n; i++) { handleProgressBar('#progress-bar', i, n); attendre une nouvelle promesse(r => setTimeout(r, 1)); // dort 1 ms } })();</pre> <pre class="brush:css;toolbar:false;">.progress-bar-striped { débordement caché; hauteur : 20px ; marge inférieure : 20 px ; couleur d'arrière-plan : #f5f5f5 ; rayon de bordure : 4 px ; -webkit-box-shadow : encart 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow : encart 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow : encart 0 1px 2px rgba(0, 0, 0, 0.1); } .progress-bar-striped>div { image d'arrière-plan : dégradé linéaire (45 degrés, 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) ; taille de l'arrière-plan : 40px 40px ; flotteur : gauche ; largeur : 0 % ; hauteur : 100 % ; taille de police : 12 px ; hauteur de ligne : 20 px ; couleur : #000000 ; poids de la police : gras ; alignement du texte : centre ; -webkit-box-shadow : encart 0 -1px 0 rgba(0, 0, 0, 0.15) ; -moz-box-shadow : encart 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow : encart 0 -1px 0 rgba(0, 0, 0, 0.15); /*-webkit-transition : largeur 3s facilité ; -moz-transition : largeur 3s facilité ; -o-transition : largeur 3s facilité ; transition : largeur 3s facilité ;*/ animation : progression-bar-stripes 2s linéaire infini ; couleur d'arrière-plan : #288ade ; } .progress-bar-striped p { marge : 0 ; } @keyframes progression-bar-stripes { 0% { position d'arrière-plan : 40px 0 ; } 100 % { position d'arrière-plan : 0 0 ; } }</pré> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</script> <div id="progress-bar" class="progress-bar-striped"> <div style="largeur : 0%;"> <p>0 %</p> </div> </div></pre> <p><br /></p> <p>谢了。</p>

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>