Changing layout dynamically

flarpy

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:
[code]
var renderNames = function( data, type, row )
{
if (viewMode === 'compact') {
return renderCompactNames(data, type, row);
} else {
return renderExpandedNames(data, type, row);
}
}
[/code]

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

[code]
$('.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)
}
})
[/code]

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

allan

A table draw doesn't refresh the content of the cells from the data source, that would be a large performance drag - rather a draw simply puts the required TR elements into the display for the current view.

What you are doing here is to actually change the content of the cells, so you need to use fnUpdate here and write the new content into the cell - so its sort of the inverse of what you are currently doing.

Interestingly DataTables 1.10 will allow exactly what you are looking for through the API command `table.column( '{selector}' ).invalidate().draw()` . But I'm afraid that exists only on paper at the moment!

Regards,
Allan

flarpy

Works a treat, thanks

[code]
$('.viewMode').click(function(){
newViewMode = $(this).val();
if (newViewMode != viewMode) {
viewMode = newViewMode;
var iCol = findColumnNumber('name', $('#programtable').dataTable().fnSettings().aoColumns);
var data = $('#programtable').dataTable().fnGetData();
for (var e in data) {
$('#programtable').dataTable().fnUpdate(data[e].name, parseInt(e), iCol, false, false);
}
$('#programtable').dataTable().fnDraw();
}
$('#settingsChooser').dialog('close');
})
[/code]