Question

在加载/搜索/排序jquery数据表时是否可以在引导模式中显示加载图标？有什么例子

Answer 1

在视图中添加Bootstrap模式，例如

 <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>

在您的搜索数据表

中

$('#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');
 } 
} );

就像你可以在分页等中调用模态一样。

注意：请参阅我在Bootstrap模式中设置data-keyboard="false" data-backdrop="static"，以便用户无法在数据提取和加载后关闭它。它会自动隐藏。

<强>更新正如您所评论的那样，您没有Ajax成功方法。因此，Datatable有一个名为 fnInitComplete 的属性，您可以在其中隐藏模态。例如，

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

就是这样。希望它有所帮助：）

模态中的数据表加载图标

1 个答案: