Buttons Plugin colvis columns option effects wrong column when combined with colReorder

jasonparallel

Test case
http://jsfiddle.net/cmv2hkj9/

stateLoadCallback changes the col order to swap the first and second column. The columns option excludes "Name" (the 1st column) but the 2nd col "Position" ends up being excluded from the colvis drop down as it is the 1st col after the reorder.

colin

I'm not sure what you're code is doing there - your stateLoadCallback isn't using what was saved, so it will do odd things. ColReorder and ColVis work with stateSave - see here and here.

Colin

jasonparallel

@colin
I created a simpler example that does not even need statesaving

http://live.datatables.net/cokehigi/3
When you first load it the column visibility box will correctly show all but the Office column. Take the Office column and drag it between Age and Start Date and now the column visibility box will incorrectly show all but the Age column

jasonparallel

Here is one more example using a jquery column selector instead of a function. When you first load it Office will be the only column in the column visibility selector. Grab Office and move it past Age and now Age will be the only column in the visibility selector.

http://live.datatables.net/cokehigi/4

colin

Gotcha, thank you for those examples, that helped alot. I've raised it internally (DD-1307 for my reference) and we'll report back here when there's an update.

Colin

jasonparallel

If anyone is having trouble due to this issue a workaround is to not exclude the column(s) via the columns attribute but to apply a css class to the buttons you want to hide.

This can be done with a function like

function resetDatatablesColVisAvailableButtons(dataTable, aiExcludeArray){
            $.each(dataTable.api().buttons('.buttons-columnVisibility' ), function( index, button ) {
                var jButton = $(button.node);
                var currentIndex = parseInt(jButton.attr( 'data-cv-idx'));
                var orgIndex = dataTable.api().colReorder.transpose( currentIndex, 'toOriginal' );
                if((jQuery.inArray( orgIndex, aiExcludeArray )=== -1)){
                    jButton.removeClass('datatablesButtonHidden');
                }else{
                    jButton.addClass('datatablesButtonHidden');
                }
            });
        }

that is called anytime the columns are reordered

table.on( 'column-reorder.dt', function ( e, settings, details ) {