Table re-draw with different column formats

Table re-draw with different column formats

dadamsdadams Posts: 1Questions: 0Answers: 0
edited April 2009 in General
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,
"fnRender": function ( oObj ) {
return Math.round(oObj.aData[oObj.iDataColumn]/(1073741824)*100)/100;
"bUseRendered": false,
"sTitle": "Data Volume (GB)"

$("button.table_refresh").bind('click', function() {
var oSettings;
oSettings = oTable.fnSettings();

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


  • allanallan Posts: 57,679Questions: 1Answers: 9,193 Site admin
    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:

    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!
This discussion has been closed.