如何在获取jQuery Datatable上的记录时显示加载图像？

Question

我有一个有5,00,000条记录的表。 该记录是我试图借助jQuery Datatable在基于搜索的UI中显示的。

单击搜索按钮后，需要一些时间来获取要在前端显示的记录。 因此客户要求在获取记录的同时显示正在加载的图像。

HTML代码在这里：

<div layout:fragment="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header" style="color: #fff;background-color: #CCE5FF;border-color: #CCE5FF;">
                    <h3 class="box-title" style="color: black;">SearchZone</h3>
                    <div class="box-tools">
                        <div class="input-group" style="width: 150px;">
                        </div>
                    </div>
                </div>
                <!--  /.box-header -->
                <div class="box-body" style="background-color: #ecf0f5">
                    <hr style="margin-top:-8px;border-top: 1px solid #861c1c;">
                    </hr>
                    <div class="alert alert-danger" style="display: none;">
                        <strong style="margin-left: 391px; font-size: 22px;"></strong>
                        <h4 id="errortxn"></h4>
                    </div>
                    <form class="form-horizontal" method="post">
                        <div class="col-md-6" >
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="FromDate" style="font-size: 14px;">From Date</label>
                                <div class="col-md-6">
                                    <div class='input-group date' id='datetimepicker1' >
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                        <input type='text' name='from_txn_date'  id='from_txn_date'  class="form-control date"  placeholder="FromDate" style="width:168px;"/>
                                    </div>
                                </div>
                            </div>                           
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="ToDate" style="font-size: 14px;">To Date</label>
                                <div class="col-md-6">
                                    <div class='input-group date' id='datetimepicker2' >
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                        <input type='text'  name='to_txn_date'  id='to_txn_date'  class="form-control date"   placeholder="ToDate" style="width:168px;"/>
                                    </div>
                                </div>
                            </div>
                            <div class="btn-group btnzone">
                                <button type="button"  class="btn btn-info"    id="searchbutton"  ><i class="fa fa-search"></i> Search</button>                              
                            </div>
                        </div>                        
                    </form>
                </div>
                <!-- end box body  -->
            </div>
            <!-- end box -->
        </div>
    </div>
    <!-- end row -->
    <div class="row">
        <div class="col-md-12">
            <div class="box" style="margin-top: -17px;">
                <div class="box-body table-responsive no-padding">
                    <table aria-describedby="log_info" role="grid" id="data" class="table table-bordered table-striped dataTable" style="margin-left: 0px;">
                        <thead style="color: black;background-color: #CCE5FF;border-color: #CCE5FF;">
                            <tr style="background-color:#CCE5FF">
                                <th>TxnId</th>
                                <th>Type</th>
                                <th>Amount</th>                             
                                <th>Mobile Number</th>
                                <th>Transaction Date</th>
                                <th>Status</th>                              
                            </tr>
                        </thead>
                    </table>
                </div>
                <!-- end box body --> 
            </div>
            <!-- end box -->
        </div>
    </div>       
</div>

此处的JS代码：

$("button#searchbutton").click(function() {                           
    var fromDate = $("#from_txn_date").val();
    var toDate = $("#to_txn_date").val();

    $('#data').DataTable({
        "ajax" : "/doSearch?fromDate="+fromDate+"&toDate="+toDate,
        "bDestroy":true,
        "columns":[
            {"data": "txnid" },                                                             
            {"data": "type"},
            {"data": "amount"},                                             
            {"data": "mobileno"},
            {"data": "fromDate"},
            {"data": "status"}
        ],
        "order": [[ 1, "desc" ]],
        "language": {
            "lengthMenu": "| View _MENU_ records per page",
            "zeroRecords": "Nothing found - sorry",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        },
        "pagingType": "full_numbers",
        "lengthChange": false 
    });
});

如何在获取记录时设置加载图像。

Answer 1

您可以在点击处理程序中调用DataTable之前显示加载图像
然后将其隐藏在DataTable的initComplete回调中：

$("button#searchbutton").click(function() {                           
  var fromDate = $("#from_txn_date").val();
  var toDate = $("#to_txn_date").val();
  //SHOW YOUR LOADING IMAGE HERE

  $('#data').DataTable({
    "ajax" : "/doSearch?fromDate="+fromDate+"&toDate="+toDate,
    ...
    "initComplete": () => {
      //HIDE YOUR LOADING IMAGE HERE

    }
  });
});

Answer 2

您可以通过以下processing: true将自定义加载器直接添加到DataTable中processing: true ，作为参考，您可以阅读此Datatable Custom Loader以及如何将图像放入加载中

var fromDate = $("#from_txn_date").val();
var toDate = $("#to_txn_date").val();

$('#data').DataTable({
    processing: true,
    "language": {
        // Add loading image <img src="loader.gif" /> tag, or simple text
        "processing": "Please wait for the response..."
    },
    serverSide: true,
    ajax: "/doSearch?fromDate="+fromDate+"&toDate="+toDate
});