how to create a progress bar with jquery ui with ajax pivot tables-CodePudding

I want to show a progress bar with the progress of my pivot table but I don't know how to do it. I have been investigating and doing it with xhr but I only show 100% in the div when the data was obtained but I want to show the progress bar.

this is my code:

HTML:

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

$.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);
                        }); 
                    }
                });

CodePudding user response：

Please review the following example: 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) {}
});

This example is similar to your example, you may need to adjust for your specific AJAX. If your AJAX call is very fast, it may not show progress, but will just be 100% right away.