CODEWITHSUNDEEP
asp.net-mvcdatatables
Maro
Maro

Reputation: 2629

Datatable loading icon in modal

Is it possible while loading/searching/sorting jquery datatables to display the loading icon in a bootstrap Modal? is there any example

Upvotes: 0

Views: 1024

Answers (1)

Basanta Matia
Basanta Matia

Reputation: 1562

Add a Bootstrap modal in your view, for example,

 <div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
 <div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Loading...</h4>
    </div>
    <div class="modal-body">
      <p>Please wait. It's loading data.</p>
      <img src="my loading gif url here" />
    </div>
  </div>
</div>

In your Search datatable,

$('#myInput').on( 'keyup', function () {  //This is an example
 //here load the Modal
 $('#myModal').modal('show'); 
 //Here call your Ajax method to call your Action Method or Api blah blah
 //Then in success method of your Ajax, hide the Modal, like,
 success:function(result)
 {
  //Your rest code here
  $('#myModal').modal('hide');
 } 
} );

Same like you can call the Modal in pagination etc etc.

Note: See I set data-keyboard="false" data-backdrop="static" in Bootstrap Modal, so that user can't able to close that since the data fetching and loading. It will automatically hide.

Updated: As you have commented bellow, you have no Ajax success method. So there is a properties of Datatable called fnInitComplete where you can hide your Modal. For example,

"fnInitComplete": function () 
 {
  $('#myModal').modal('hide');
 }

That's it. Hope it helps :)

Upvotes: 1

Related Questions