Is it possible to re-render column/table?

pali

Hello,

We are using custom render function for displaying the `size` in the human readable format. The source data are in `bytes` units, but rendered data for the `display` are in `kB`, `MB`, auto, etc. So far everything works as expected, sorting works just fine without the custom function as the data are plane numbers.

Now the user have the option to change the `size` units via some combo-box and we want to change it on the client side only, because retrieving the data from the server is quite complex and time consuming. However if we change `mRender` function for the specific column, nothing will change even after calling `fnDraw()`.

Note: currently the source data are rendered directly with the page, we plane to use AJAX and asynchronous loading later.

Is there any way to force re-rendering of the table without resetting the existing data?

[code]
...
function renderSizeAuto( data, type, full )
{
return type === "display" ? formatSize( data, formatSize.type.AUTO, true ) : data;
}
function renderSizeKB( data, type, full )
{
return type === "display" ? formatSize( data, formatSize.type.KB, true ) : data;
}
...
// from initialization:
$(document).ready( function()
{
$("#mytable").dataTable(
{
"bPaginate": false,
"aoColumnDefs": [{"mRender":renderSizeAuto,"aTargets":[0]}]
});
});
...
// after some user action:
$("#mytable").fnSettings().aoColumns[0].mRender = renderSizeKB;
$("#mytable").fnDraw();
[/code]

Thanks,
Pali

allan

I would very strongly recommend against ever setting the properties in the object returned by fnSettings. They are considered to be private and modifying them it not supported.

If you need to be able to change the function, have your renderSizeAuto function perform a logic check on which function it should run.

Allan

pali

Thanks Allan, I will do that...

However here is my solution to re-render datatable column:

[code]
function renderDatatableCell( oTable, row, column, renderFn )
{
var data = oTable.fnGetData( row );
var cell = $(oTable.fnGetNodes( row )).children("td:nth-child(" + (column + 1) + ")");
$(cell).html( renderFn( data[column], "display", data ) );
}

function renderDatatableColumn( oTable, column )
{
var rows = oTable.fnGetData().length;
if (rows > 0)
{
var renderFn = oTable.fnSettings().aoColumns[column].mRender;
for (row = 0; row < rows; row ++)
{
renderDatatableCell( oTable, row, column, renderFn );
}
}
}
[/code]

Any comments appreciated.