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?

Please edit the question to show *how the table function is used*, because there is nothing at present to show what you are actually attempting to *do*. — Andrew Leach, Aug 24 '12 at 08:26
How you display your details table: on a dialog, overlay... Maybe this doesn't work because you are trying to change the class of Elements that are not appended to the DOM. — jmventar, Aug 24 '12 at 08:59
"When I change the language and my javascript is changing each value through the class name" - I, for one, do not understand this part of your question. — LeGEC, Aug 30 '12 at 11:54
why you have written the 'details' hard coded when language change will class "details" not changes?? — Sumit Neema, Aug 31 '12 at 07:39
yes table is created and when I want to dynamically change the values it doesnt changes — user123_456, Aug 31 '12 at 07:53

score 4 · Accepted Answer · answered Aug 24 '12 at 17:28

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.

I'll try your code and I0ll let you know if its working for me — user123_456, Aug 31 '12 at 07:53

score 1 · Answer 2 · answered Aug 30 '12 at 14:26

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.

How to change value if table is already drawn

2 Answers2