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

please refer test case

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

this code

$(document).ready(function() {     $('#example').datatable( {         dom: 'c<"clear">lfrtip',         "fnpredrawcallback": function( osettings ) {           alert('pre');         },         "fndrawcallback" : function() {           alert('+++++');         }     } ); } ); 

when go show/hide columns , click on column item see each predrawcallback , drawcallback event fires twice.

does having idea why happens.

i want show loader before data loads , hide , when data loaded. appreciated

thanks

indeed events fired twice when sorted column visibility being toggled.

i see no point in showing loading indicator client-side processing, column visibility changes occur fast. server-side processing, there processing option available.

you can this. had put alert() because columns toggled fast , 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 toggled'); } ); 

see this jsfiddle code , demonstration.