jquery datatables : load real time progress bar

Question

A normal ajax real time progress bar loads like this,

$.ajax({
xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(e) {
                    var pro = (e.loaded / e.total) * 100;
                    $('.progress-bar-anim').css('width', pro + '%').attr('aria-valuenow', pro);
                }, false);
                return xhr;
            },
            type: "POST",
            dataType: 'json',
            url: "data.php",
            data: {"username": username, "password": password},
            success: function(msg) {
                if (msg.status == 'success') {
                    window.location = "dashboard.php"
                } else {
                    hide_progress();                 
                }
            }
        });

I want to load a real time progress bar in jquery datatables while the server response is being received.How should I go about it ?

Answer 1

Create the table in your success method:

function getData() {
    $.ajax({
      url : 'example.com',
      type: 'GET',
      success : handleData
    })
}

function handleData(data) {
    table = $('#table').DataTable( {
            "data": data,
            ....
}