How to change value if table is already drawn

Question

I am using DataTables plugin for jQuery for drawing table on my web app. Everything is working correctly. But one of the option is to press a details button to open an info window which will have additional values. Now that part is working correctly but my table is defined with classes so I can change language dynamically when user changes language using menu.

The only thing that I am getting is in English, as I declared it at the start.

My predefined table:

function fnFormatDetails ( nTr )
{
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="background-color:whitesmoke; padding-left:10%; padding-right:10%; width:100%">';
    sOut += '<tr><td style="text-align:left"><span class="id_prog">ID Program : '+aData[0]+'</span></td><td style="text-align:left"><span class="id_in_perc">Increment : '+aData[3]+'</span></td></tr>';
    sOut += '<tr><td style="text-align:left"><span class="id_var">Machine position : '+aData[1]+'</span></td><td style="text-align:left"><span class="id_tot_in_var">Total inc : '+aData[4]+'</span></td></tr>';
    sOut += '<tr><td style="text-align:left"><span class="id_dti_var">DTI : '+aData[2]+'</span></td></tr>';
    sOut += '</table>';

    return sOut;
}

When I change the language and my javascript is changing each value through the class name, nothing happens, but for the rest of my code this works fine but for this predefined table doesn't. Any idea?

EDIT

This is a event listener:

$('#jphit tbody td img').live( 'click', function () {
        var nTr = $(this).parents('tr')[0];
        if ( oTable.fnIsOpen(nTr) )
        {
            /* This row is already open - close it */
            this.src = "images/plus-icon.png";
            oTable.fnClose( nTr );
        }
        else
        {
            /* Open this row */
            this.src = "images/minus-icon.png";
            oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
        }
} );

So when buttons is clicked I call fnFormatDetails() function but then its drawn only as it is set. So when I dynamically change the value of that table nothing is changing.

Do you need some more details?

Answer 1

If i understand correctly, you try to dynamically change the contents of the table that is always on the page. I dont know why you would put that in your javascript but as you're using jQuery i suggest a different approach.

This would be in your html file.

<table id="myTable">
    <tr>
        <td><span id="id1"><!-- content will load here --></span></td>
        <td><span id="id2"><!-- content will load here --></span></td>
    </tr>
</table>

I would use id instead of class because those values are unique.

And the javascript to replace the contents of the html tags.

function fnFormatDetails ( nTr ) {
    var aData = oTable.fnGetData( nTr );
    $("#id1").html("My data here " + aData[0]);
    $("#id2").html("My data here " + aData[1]);
    ...
}

This will replace the html content of the tag with the specified id with the content you specify as attribute.

I hope that helps you out.

Answer 2

1) I would suggest you look at the aData in fnFormatDetails via console.log. This will ensure that function is getting executed and you are seeing the right values in the array.

2) Try clearing the old table by nTr.html("") and see if that improves anything.

Could you paste image of the table for us to understand better.