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

JavaScript 代码:

$("button#searchbutton").click(function() {
  var fromDate = $("#from_txn_date").val();
  var toDate = $("#to_txn_date").val();
  $('#loading').modal('show');
  $('#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"]
    ],
    "initComplete": () => {
      $('#loading').modal('hide');
    },
    "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
  });
});

获取零条记录后，它在语言属性中显示Nothing found - sorry 但加载图像没有隐藏。

我的代码哪里出错了？

Answer 1

使用Datatable默认加载，语言添加代码

 $("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,
    "processing": true,
    "serverSide": 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)",
        "sProcessing": "<img src='loading.gif'>"
    },
    "pagingType": "full_numbers",
    "lengthChange": false 
});
});

Datatable Example