javascript - 如何在 jQuery Datatable 上获取空记录后隐藏加载图像
问题描述
我有一张有 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
在语言属性中,但加载图像没有隐藏。
我的代码中的错误在哪里?
解决方案
使用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
});
});
推荐阅读
- java - 图形不会自动移动,并且在按下箭头键时也会复制而不是移动
- perl - perl 对 return 语句的引用和取消引用
- huawei-mobile-services - HMS Push Kit,getToken() 方法在 Android 9 上不工作
- nativescript - Nativescript 6.5 iOS 挂起事件仅在应用再次激活时触发
- java - 如何从不同 PC 的另一个工作区导入 Java 类文件
- php - 导出 mysql 表和 zipArchive
- mysql - 生成两个日期之间的日期列表
- mongodb - 基于填充字段的虚拟
- laravel - zsh:找不到命令:laravel - 如何修复
- python - ModuleNotFoundError:没有名为“pyodbc”的模块-Azure Batch-Ubuntu