Changing layout dynamically

Hi Allan

I am adding a new feature to the program listing, allowing users to choose between 'expanded' mode, that includes an image and extra information, and a 'compact' mode. This affects one column only, the 'names' column.

I am doing this using:

    var renderNames = function( data, type, row )
    {
        if (viewMode === 'compact') {
            return renderCompactNames(data, type, row);    
        } else {
            return renderExpandedNames(data, type, row);    
        }
    }

I then have a button to allow users to toggle between the two:

    $('.viewMode').click(function(){
        newViewMode = $(this).val();
        if (newViewMode != viewMode) {
            viewMode = newViewMode;
            console.log('redraw ' + viewMode)
            $('#programtable').dataTable().fnDraw();
        } else {
            console.log(newViewMode)
            console.log(viewMode)
        }
    })

However, I think that fnDraw doesn't do quite what I expect or has some clever caching going on. When changing viewMode the html output doesn't actually change even though viewMode is set correctly and the correct method (renderCompactNames/renderExpandedNames) is called.

Please could you tell me how to achieve what I'm after?

Thanks