datatables - JavaScript/jQuery - DataTables 在按钮单击时显示加载/处理消息
问题描述
我有以下代码段,当单击特定按钮时运行(该表已较早初始化)
table1.ajax.url('/data.json');
table1.ajax.reload();
数据很好地填满了表格,但需要几秒钟。我的问题是如何显示消息/gif 以显示数据正在加载?我怎么知道数据何时已完全加载?
初始化代码
var table1 = $('#day1_table').DataTable( {
"processing": true,
scrollY: "500px",
scrollX: true,
scrollCollapse: true,
"search": {
"smart": false
},
"lengthMenu": [[5,10, 20, 50, -1], [5,10, 20, 50, "All"]],
"columnDefs": [
{
"targets": [ 0,1,2,23,24,25,26,27,28,29 ],
"visible": false
},
{ "width": "200px", "targets": [17] },
{ "width": "100px", "targets": [0,1,2,3,4,5,6,11,12,13,14,15,16,17,18,19,20,21,22] },
{ "width": "50px", "targets": [7,8,9] }
],
"pageLength": 50,
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: [ 0,1,2,4,5,6,7,8,9,10,11,12,13,14,15,16,17,19,20,21,22 ]
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: [ 0,1,2,4,5,6,7,8,9,10,11,12,13,14,15,16,17,19,20,21,22 ]
},
text: 'Export to Excel'
}
],
// "drawCallback" : function( settings ) {
// var api = this.api();
// var pageInfo = api.page.info();
// $('#total-resource-1').html(pageInfo.recordsDisplay);
// },
"createdRow": function ( row, data, index ) {
if ( data[19] == 'EARLY' ) {
$('td', row).eq(16).addClass('success-dark');
}
else if ( data[19] == 'LATE' ) {
$('td', row).eq(16).addClass('success-dark');
}
else if ( data[19] == 'NIGHT' ) {
$('td', row).eq(16).addClass('success-dark');
}
else if ( data[19] == 'Non-working' ) {
$('td', row).eq(16).addClass('danger');
}
}
} );
谢谢
解决方案
可能与此重复: https ://stackoverflow.com/a/40346664/5601169
相应的代码,把这个放在你初始化代码之后:
table1.on('preXhr.dt', function(e, settings, data){
$(this).dataTable().api().clear();
settings.iDraw = 0; //set to 0, which means "initial draw" which with a clear table will show "loading..." again.
$(this).dataTable().api().draw();
});
推荐阅读
- javascript - Visual Studio Code javascript 验证
- mysql - 在 MySQL 中更新任何字段时调用 HTTP 请求的方法
- ios - 以 Blob 格式下载 PDF 无法在 Chrome iOS 上运行
- powerbi - 如何实现 PowerPivot 分段?
- blockly - 如何在节点上获取最新的块版本
- cefsharp - 如何使用 CefSharp 自定义方案将“访问控制允许来源”添加到请求的资源
- c# - 模型对象返回 null
- javascript - 为什么 onanimationend 在我的代码中不起作用,但 addEventListener("animationend") 起作用?
- javascript - JS修改基于URL填充联系表单下拉列表
- mongodb - 无法提取地理键,未知 GeoJSON 类型:{ 坐标:[ 13.42493130000003, 52.50074619999999 ]