如何使用帶有ajax資料透視表的jqueryui創建進度條

我想用我的資料透視表的進度顯示一個進度條，但我不知道該怎么做。我一直在用 xhr 進行調查和做，但是在獲取資料時我只在 div 中顯示 100%，但我想顯示進度條。

這是我的代碼：

HTML：

<div id = "progressbar">
      </div>

JS

$.ajax({
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        var progressBar = $("#progressbar");
                        //Upload progress
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = (evt.loaded / evt.total) * 100;
                                percentComplete = Math.floor(percentComplete);
                                console.log(percentComplete);
                                progressBar.css("width", percentComplete   "%");
                                progressBar.html(percentComplete   '%');
                            }
                        }, false);
                        return xhr;
                    },
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: { 'date1': date1, 'date2': date2 },
                    success: function(data) {
                        $("#table").empty();

                        data.forEach(centro => {    
                            var fila = "<tr>"                                      "<td>"   centro.prefijo   "</td>"  
                                "<td>"   centro.sales   "</td>"  
                                "<td>"   centro.possales   "</td>"  
                                "<td>"   centro.totales   "</td>"  
                                "<td>"   centro.percentage   "%"   "</td>"  
                                "<td>"   centro.attendance   "</td>"  
                                "<td>"   centro.factor   "%"   "</td>"  
                                "</tr>";
                            $("#table").append(fila);
                        }); 
                    }
                });

uj5u.com熱心網友回復：

請查看以下示例：https ://jsfiddle.net/Twisty/ntmw9r43/1/

HTML

<div id="progress"></div>

CSS

#progress {
  display: block;
  text-align: center;
  width: 0;
  height: 10px;
  background: red;
  transition: width 0.3s;
}

#progress.hide {
  opacity: 0;
  transition: opacity 1.3s;
}

JavaScript

var data = [];
for (var i = 0; i < 100000; i  ) {
  var tmp = [];
  for (var i = 0; i < 100000; i  ) {
    tmp[i] = 'hue';
  }
  data[i] = tmp;
}

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        console.log(percentComplete);
        $('#progress').css({
          width: percentComplete * 100   '%'
        });
        if (percentComplete === 1) {
          $('#progress').addClass('hide');
        }
      }
    }, false);
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        console.log(percentComplete);
        $('#progress').css({
          width: percentComplete * 100   '%'
        });
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/echo/html",
  data: data,
  success: function(data) {}
});

此示例與您的示例類似，您可能需要針對您的特定 AJAX 進行調整。如果您的 AJAX 呼叫非常快，它可能不會顯示進度，但會立即達到 100%。

標籤：jQuery阿贾克斯jQuery-ui

上一篇：在ajax運行之前是否設定了變數？

下一篇：422無法處理的內容Ajax表單-Laravel8