5

Ich verwende das DataTables-Plugin für jQuery zum Zeichnen von Tabellen in meiner Web-App. Alles funktioniert richtig. Aber eine der Optionen ist, eine Detailtaste zu drücken, um ein Informationsfenster zu öffnen, das zusätzliche Werte haben wird. Jetzt funktioniert dieser Teil korrekt, aber meine Tabelle ist mit Klassen definiert, so dass ich die Sprache dynamisch ändern kann, wenn der Benutzer die Sprache über das Menü ändert.So ändern Sie den Wert, wenn die Tabelle bereits gezeichnet wurde

Das einzige, was ich bekomme, ist auf Englisch, wie ich es am Anfang erklärt habe.

Meine vordefinierten Tabelle:

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; 
} 

Wenn ich ändern, um die Sprache und mein Javascript jeden Wert durch den Klassennamen ändert, passiert nichts, aber für den Rest meines Codes dies funktioniert gut, aber für diese vordefinierte Tabellen nicht. Irgendeine Idee?

EDIT

Dies ist ein Ereignis-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'); 
     } 
}); 

Also, wenn Tasten Ich nenne fnFormatDetails() Funktion geklickt wird dann aber nur ihr gezogen, wie es eingestellt ist. Wenn ich also den Wert dieser Tabelle dynamisch ändere, ändert sich nichts.

Benötigen Sie weitere Informationen?

+2

Bitte bearbeiten Sie die Frage, um * zu zeigen, wie die Tabellenfunktion * verwendet wird, da derzeit nichts angezeigt wird, um zu zeigen, was Sie eigentlich * tun * wollen. –

+2

Wie Sie Ihre Detailtabelle anzeigen: in einem Dialog, Overlay ... Vielleicht funktioniert das nicht, weil Sie versuchen, die Klasse von Elementen zu ändern, die nicht an das DOM angehängt sind. – jmventar

+1

Ich habe meine Antwort bearbeitet –

Antwort

4

Wenn ich richtig verstehe, versuchen Sie, den Inhalt der Tabelle, die immer auf der Seite ist, dynamisch zu ändern. Ich weiß nicht, warum Sie das in Ihrem Javascript setzen würden, aber da Sie jQuery verwenden, schlage ich einen anderen Ansatz vor.

Dies wäre in Ihrer HTML-Datei.

<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> 

Ich würde ID anstelle von Klasse verwenden, da diese Werte eindeutig sind.

Und das Javascript, um den Inhalt der HTML-Tags zu ersetzen.

Dadurch wird der HTML-Inhalt des Tags durch die angegebene ID mit dem Inhalt ersetzt, den Sie als Attribut angeben.

Ich hoffe, dass dir das hilft.

+0

Ich werde versuchen, Ihren Code und I0ll lassen Sie wissen, ob es für mich funktioniert –

1

1) Ich würde vorschlagen, dass Sie die aData in fnFormatDetails über console.log betrachten. Dadurch wird sichergestellt, dass die Funktion ausgeführt wird und Sie die richtigen Werte im Array sehen.

2) Versuchen Sie, die alte Tabelle durch nTr.html ("") zu löschen und zu sehen, ob das irgendetwas verbessert.

Könnten Sie Bild der Tabelle für uns besser zu verstehen.

Verwandte Themen