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

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

jasonparalleljasonparallel Posts: 4Questions: 1Answers: 0

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.

Answers

  • colincolin Posts: 7,698Questions: 0Answers: 1,297

    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

  • jasonparalleljasonparallel Posts: 4Questions: 1Answers: 0

    @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


  • jasonparalleljasonparallel Posts: 4Questions: 1Answers: 0

    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

  • colincolin Posts: 7,698Questions: 0Answers: 1,297

    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

  • jasonparalleljasonparallel Posts: 4Questions: 1Answers: 0

    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 ) {
    
Sign In or Register to comment.