Display Spinner While Datatables Table Loads Ruby on Rails

Display spinner while DataTables table loads Ruby on Rails

You can add in a spinner gif (find one here: http://www.ajaxload.info/) as a div where your table should be and then clear it when the table loads using initComplete.

Put something like this right below <div class="col-md-12">:

<img id="loadingSpinner" src="/myspinner.gif">

And then call your table like this:

$(document).ready(function() {
  var table = $('#app-list-table').DataTable({
    //any other datatables settings here
    "initComplete": function(settings, json) {
      $('#loadingSpinner').hide();
      //or $('#loadingSpinner').empty();
    }
  })
});

How to display spinner when i checking host on online?

Yep - you'll likely want to load the page with a holding status / the spinner then use AJAX to fetch the websites' statuses.

Have a read of this guide for the very basics - hope this helps point you in the right direction :)

You could then cache these results until you need to check again.

Is there any way to load DataTables before showing original table?

There are some ways to prevent this FOUC, but you can not init the datatable before actually loading the page.

One option is to hide your table at the start using some CSS like display: none; or visibility: hidden; depending on your layout etc.

Another option would be to pass your data directly to datatables without an intermediate HTML table. You can find the respective example in their documentation.

Ajax loading spinner in Rails 4

for future reference this is what actually worked for me,no need for timers and such. it takes as long as the ajax request is not finished.

$(".spinner").hide();

  $(document).ajaxStart(function() {
    $(".spinner").fadeIn('slow');
  }).ajaxStop(function() {
      $(".spinner").hide();
  });

Datatables - load only visible images

While there's likely a way to programatically put image links in IMG tags only once the row is displayed, it's easier to just use something else.

Using jQuery Unveil simplifies the entire process in combination with Datatables' drawCallback. If you do not use drawCallback and use the default Unveil's code, image loading on search may not function correctly.

Images (in rows):

<img src="placeholder.png" data-src="imagetoload.jpg" />

JS:

$(document).ready( function () {
    $('#tableid').DataTable( {
        "drawCallback": function( settings ) {
            $("#tableid img:visible").unveil();
        }
    });
});

Ajax Loading graphic while waiting for d3 graphs/.json response? (Rails)

Just include the spinner graphic inside the #plot1 tag

<div id="plot1" class="plot">
    <img src="../../assets/images/ajax-loader.gif"/>
</div>

At the time you want to draw your graph here just select the image and remove it, and create an svg tag instead

d3.select("#plot1 img").remove();
var svg = d3.select("#plot1").append("svg")
    .attr("width", 500)
    .attr("height", 500);

Just add your drawing to this svg variable

---

Related Topics