javascript - Jquery Datatables Colvis 在列项单击时触发 preDrawCallback 和 DrawCallback 两次

Question

请引用我的测试用例

https://jsfiddle.net/1c3Lmace/13/

这是我的代码

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'C<"clear">lfrtip',
        "fnPreDrawCallback": function( oSettings ) {
          alert('pre');
        },
        "fnDrawCallback" : function() {
          alert('+++++');
        }
    } );
} );

当您转到“显示/隐藏列”并单击任何列项目时，您将看到每个 preDrawCallBack 和 drawCallback 事件都会触发两次。

有人知道为什么会发生这种情况吗？

我想在数据加载之前显示加载器并在数据成功加载时隐藏它。任何帮助表示赞赏

谢谢

Answer 1

事实上，事件会触发两次，但仅在切换排序列可见性时才触发。

我认为显示客户端处理的加载指示器没有意义，列可见性变化发生得非常快。对于服务器端处理，有 processing选项已经可用。

你可以做这样的事情。但我必须添加一个 alert()，因为列的切换速度非常快，并且 Processing... 消息很快就会消失。

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'C<"clear">lfrtip',
        processing: true,
        drawCallback : function() {
          $('.dataTables_processing', $('#example').DataTable().table().container()).hide();
        }
    } );
} );

$('#example').on( 'column-visibility.dt', function ( e, settings, column, state ) {
    $('.dataTables_processing', $('#example').DataTable().table().container()).show();
    alert('Column visibility is toggled');
} );

参见this jsFiddle用于代码和演示。