如何在資料表中建立進度條？

Question

<p>我目前正在處理包含大量資料（5000）的資料表。為了能夠以進度載入數據，我新增了一個進度條，用於說明每個時間單位已載入的資料量。但下面的程式碼不再起作用。</p> <p><br />></p> <pre class="brush:js;toolbar:false;">讓handleProgressBar = (id, value, Total) => { 讓百分比 = Math.round((值 / 總計) * 10000) / 100; $(id " > div").html(百分比 "%"); $(id " > div").css('width', 百分比 "%"); } 讓表 = $('#data').DataTable(); fetch('https://jsonplaceholder.typicode.com/photos') .then((res) => res.json()) .then((res) => { res.forEach(async(數據，索引)=>{ 表.行.加([ 數據.id, 數據.albumId, 數據.標題, 資料位址 ]); handleProgressBar('#progress-bar', 索引 1, res.length); 等待新的 Promise(r => setTimeout(r, 1)); // 休眠1毫秒 }); 表格.draw(); });</pre>

.progress-bar-striped {
    溢出：隱藏；
    高度：20px；
    下邊距：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 {
    背景影像: 線性漸層(45deg, rgba(255, 255, 255, 0.15) 25%, 透明25%, 透明50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 55, 55, 55, 25, 5 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: 寬度 3s 輕鬆;
    -moz-transition：寬度 3s 緩動；
    -o-transition：寬度 3s 緩動；
    過渡：寬度 3s 緩動；*/
    動畫：progress-bar-stripes 2s 線性無限；
    背景顏色：#288ade；
}

.進度條條紋 p {
    保證金：0；
}

@keyframes 進度條條紋 {
    0% {
        背景位置：40px 0；
    }
    100% {
        背景位置：0 0；
    }
}</前>
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="樣式表”/>
<腳本 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<腳本 src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

;
    

        <p>0%</p>
    
;

<table id="data" class="table display table-stripped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Album ID</th>
            <th>Title</th>
            <th>網址 Photo</th>
        </tr>
    </thead>
    <tbody></tbody>
</table></pre>
<p><br /></p>
<p>表已成功加載，但進度條顯示<code>100%</code>，而不是應從<code>0%</code> 遞增到<code>100%</ code>。我想知道如果我不使用資料表，它是否有效（<em>但不完美</em>），如下面的程式碼所示。</p>
<p><br />></p>
<pre class="brush:js;toolbar:false;">讓handleProgressBar = (id, value, Total) => {
    讓百分比 = Math.round((值 / 總計) * 10000) / 100;
    $(id " > div").html(百分比 "%");
    $(id " > div").css('width', 百分比 "%");
}

（異步（）=>{
  令 n = 5000；
  handleProgressBar('#progress-bar', 0, n);
  for(令 i = 1; i <= n; i ) {
    handleProgressBar('#progress-bar', i, n);
    等待新的 Promise(r => setTimeout(r, 1)); // 休眠1毫秒
  }
})();</pre>
.progress-bar-striped {
    溢出：隱藏；
    高度：20px；
    下邊距：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 {
    背景影像: 線性漸層(45deg, rgba(255, 255, 255, 0.15) 25%, 透明25%, 透明50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 55, 55, 55, 25, 5 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: 寬度 3s 輕鬆;
    -moz-transition：寬度 3s 緩動；
    -o-transition：寬度 3s 緩動；
    過渡：寬度 3s 緩動；*/
    動畫：progress-bar-stripes 2s 線性無限；
    背景顏色：#288ade；
}

.進度條條紋 p {
    保證金：0；
}

@keyframes 進度條條紋 {
    0% {
        背景位置：40px 0；
    }
    100% {
        背景位置：0 0；
    }
}</pre>
<腳本 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;< /腳本>
;
    

        <p>0%</p>
    
</div></pre>
<p><br />></p>
<p>我不知道錯誤出在哪裡。誰崩潰了我提供處理大量資料的資料表進度條的完美方法？先謝謝了。</p>            
            

                

                    
                    1
                

                

                    
                                                    
                                            
                    0
                
                

                    
                                                    
                                            
                    0
                
            
            
            

                

                    
                    

                        P粉422227023
                        

                    
                
                

                    

                    

                        

                            回覆
                        
                    
                
            
            

                

                    
全部回覆(1)
                    我來回復
                    關閉
                
                


                                

                    
                    

                        

                            

                                P粉0227236062023-08-27 14:04:04
                                1樓
                            
                            
我已經找到解決辦法了。錯誤是我將 async 一詞放在 res.forEach 中。當我將其放在 fetch.then 之後並使用 for 循環而不是 forEach 時，函數執行的行為發生了變化並且可以成功完成。 loadNumber 變數可用來決定每單位時間將在資料表中繪製多少資料。 



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>


                            

                                 
                                點贊 +0
                                

                                    新增回覆
                                    关闭回复
                                
                            
                                                            

                                    

                                        

                                            

                                                
                                                P粉422227023
                                            
                                        
                                        
                                        回覆
                                    
                                
                            
                            

                                

                                    
                                

                            


                        
                    

                
                

                



                

            
        

Answer 1

我已經找到解決辦法了。錯誤是我將 async 一詞放在 res.forEach 中。當我將其放在 fetch.then 之後並使用 for 循環而不是 forEach 時，函數執行的行為發生了變化並且可以成功完成。 loadNumber 變數可用來決定每單位時間將在資料表中繪製多少資料。

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>