搜索

首页  >  问答  >  正文

如何在数据表中创建进度条?

<p>我目前正在处理包含大量数据(5000)的数据表。为了能够按进度加载数据,我添加了一个进度条,用于说明每个时间单位已加载的数据量。但下面的代码不再起作用。</p> <p><br />></p> <pre class="brush:js;toolbar:false;">让handleProgressBar = (id, value, Total) => { 让百分比 = Math.round((值 / 总计) * 10000) / 100; $(id + " > div").html(percent + "%"); $(id + " > div").css('宽度', 百分比 + "%"); } 让表 = $('#data').DataTable(); fetch('https://jsonplaceholder.typicode.com/photos') .then((res) => res.json()) .then((res) => { res.forEach(async(数据,索引)=>{ 表.行.添加([ 数据.id, 数据.albumId, 数据.标题, 数据地址 ]); handleProgressBar('#progress-bar', index+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, 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: 宽度 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>URL 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(percent + "%"); $(id + " > div").css('宽度', 百分比 + "%"); } (异步()=>{ 令 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, 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: 宽度 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>
P粉422227023P粉422227023486 天前596

全部回复(1)我来回复

  • P粉022723606

    P粉0227236062023-08-27 14:04:04

    我已经找到解决办法了。错误是我将 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
  • 取消回复