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。