Answers

• rf1234 Posts: 2,808Questions: 85Answers: 406

  January 2020 edited January 2020

  I have got this to change the data tables defaults to make it show a font awesome spinner:

  $.extend( true, $.fn.dataTable.defaults, {
      "language": {
          "processing": "<span class='fa-stack fa-lg'>\n\
                              <i class='fa fa-spinner fa-spin fa-stack-2x fa-fw'></i>\n\
                         </span>&emsp;Processing ..."
      }
  } );
  

  This might work for your button as well if you turn on "processing":

  $.extend( true, $.fn.dataTable.defaults, { 
      processing: true
  } );
  

  You can also turn it on for your individual data table without changing the defaults.

  If this doesn't work - and it might not - you would need to use something like "busyLoad". And find the suitable data tables events in the docs in order to use it ... Like in here:

  .on('select', function () {
      // show
      $.busyLoadFull("show", { 
          fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw"
      });
  ......
  .on('draw', function () {
       // hide
      $.busyLoadFull("hide", { 
        // options here 
      });
  

  This code shows a fuill screen spinner when the user selects a record and it hides the full screen spinner as soon as the drawing of the page has been completed.
  https://piccard21.github.io/busy-load/
• colin Posts: 15,143Questions: 1Answers: 2,586

  January 2020

  This thread might also help,

  Colin
• apatters Posts: 1Questions: 0Answers: 0

  January 2020

  The piccard21 samples do not work in IE, only Chrome.
• rf1234 Posts: 2,808Questions: 85Answers: 406

  January 2020

  Just checked it with IE. Works fine! But maybe this is due to me using a polyfill which I strongly recommend to avoid trouble with IE.

  This one is really good:
  https://datatables.net/forums/discussion/comment/164504#Comment_164504