Table re-draw with different column formats

dadams

Hi, I really like this plugin and I'm having great success with it. But as I'm polishing off my table page, I'm having a little trouble implementing some finishing touches. One feature I would like to implement is the ability to change the units used in the display of one of the columns--purely in javascript. The particular column in question displays "bytes" and it's nice to be able to switch between KB,MB,GB, etc. on that column.

The DataTables fnRender feature works great if just initialize the table with a simple fnRender function that converts to the units I want. Right now, I'm allowing the user to choose units from an external form which reloads the page from which the template puts the right fnRender function into the page. This works, but... reloading is silly since all the data is sitting there (an ideal use of pure javascript, no?). So the problem I am having is getting DataTables to reDraw the table using a different fnRender function.

The latest javascript from my page is below. Basically I've tried altering the fnRender function and re-drawing the table. I've also tried changing the data directly, but either way, I just get the same table back again. When click my test button the table redraws, but the numbers don't change. The alert output shows the fnRender function changing, but it's like the fnDraw call uses the original fnRender function anyway.

I'm probably just missing some simple detail, but it seems that none of the changes I make to the oSettings object stick. Perhaps I'm going at this entirety the wrong way... I would really appreciate any help that could be provided.


var oTable;
$(document).ready(function() {
oTable = $("table.display").dataTable({
"aaSorting": [[0,'desc']],
"iDisplayLength": 25,
"aoColumns":[
{
"fnRender": function ( oObj ) {
return Math.round(oObj.aData[oObj.iDataColumn]/(1073741824)*100)/100;
},
"bUseRendered": false,
"sTitle": "Data Volume (GB)"
},null,null]
});


$("button.table_refresh").bind('click', function() {
var oSettings;
//oTable.fnFormatColumnAsDataVol("0","bytes","MB");
oSettings = oTable.fnSettings();

var iLen = oSettings.aoData.length;
var iColumn = 0;
for ( var iRow=0 ; iRow

allan

Hi dadams,

There is a couple of ways that you can do what you are looking for - have a look at the following discussion which talks about something very similar to what you are looking for:

http://datatables.net/forums/comments.php?DiscussionID=189

Basically you can:

1. Parse through each table row and use fnUpdate() to recalculate the display
2. Have a column for each unit and then hide those which you aren't interested in
3. Have the server do the hard work and reload the table through Ajax.

Hope this helps!
Allan