Comment créer une barre de progression dans datatable ?

Question

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.

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>

Le tableau a été chargé avec succès, mais la barre de progression affiche 100% au lieu d'incrémenter de 0% à 100%. Je me demandais si cela fonctionnerait (mais pas parfaitement) si je n'utilisais pas de table de données, comme indiqué dans le code ci-dessous.

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
  }
})();

.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>

谢了。

Answer 1

J'ai trouvé la solution. L'erreur était que j'avais rendu la variable async 一词放在 res.forEach 中。当我将其放在 fetch.then 之后并使用 for 循环而不是 forEach 时，函数执行的行为发生了变化并且可以成功完成。 loadNumber disponible pour déterminer la quantité de données qui seraient tracées dans le tableau de données par unité de temps.

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>