Jquery Datatables Colvis fires preDrawCallback and DrawCallback twice on column item click

Question

Please refer to my test case

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

This is my code

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

When you go to Show/Hide Columns and click on any column item you will see that each preDrawCallBack and drawCallback event fires twice.

Does anyone having any idea why it happens.

I want to show a loader before data loads and hide it and when data is successfully loaded. Any help is appreciated

Thanks

Answer 1

Indeed the events are fired twice but only when sorted column visibility is being toggled.

I see no point in showing loading indicator for client-side processing, column visibility changes occur very fast. For server-side processing, there is processing option already available.

You can do something like this. But I had to put an alert() because columns are toggled very fast and Processing... message disappears quickly.

$(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');
} );

See this jsFiddle for code and demonstration.