Changing row data dynamically
Changing row data dynamically
Deuce14
Posts: 5Questions: 0Answers: 0
Hi Allen,
I've got a working solution for this issue but it seems like a workaround vice the "optimal" solution. I have 2 DataTables in different layers on a page, one of which is an Editor DataTable. Both are not viewable together (one is a summary with fewer fields, one is the actual, editable table). What I want to do is update an edited row in the Editor instance also in the summary table (client-side only, Editor takes care of the server-side data writing/saving).
Here's what I'm doing:
[code]
var oTable = $('#summaryTable).dataTable(); /* More settings in there but not important */
editor.on('onPostEdit', function ( settings, json ) {
/*** Do some modifications with the json data ***/
oTable.fnDeleteRow( $('#summaryTable tr[id='+id+']')[0], null, true );
oTable.fnAddData([ /**Data modified above from json**/ ]);
oTable.fnDraw();
[/code]
The above DOES work, however it SEEMS that I should simply be able to do the following:
[code]
var oTable = $('#summaryTable).dataTable(); /* More settings in there but not important */
editor.on('onPostEdit', function ( settings, json ) {
/*** Do some modifications with the json data ***/
oTable.fnUpdate([ /**Data modified above from json**/ ], id);
[/code]
However, I get [quote]TypeError: f.aoData[b] is undefined[/quote] from jQuery.dataTables.min.js every time with the above. Of note I'm passing DT_RowId in my AJAX data from the server to the dataTable, but I've worked with the id variable and cannot get around this.
[quote]Hold on[/quote]
Solved. I'll post this anyway in case anyone else runs into this one - it wasn't clear to me from the documentation/examples, but makes sense now.
For fnUpdate, the row id needs to be passed in full - I was literally just passing the row number just like I was using for DT_RowId (i.e., 10). Adding in the full jQuery selector works just fine, as in:
[code]
oTable.fnUpdate([ /**Data modified above from json**/ ], id); // <= WRONG
oTable.fnUpdate([ /**Data modified above from json**/ ], $('#summaryTable tr[id='+id+']')[0]); // <= CORRECT, works
[/code]
Cheers,
Chris
I've got a working solution for this issue but it seems like a workaround vice the "optimal" solution. I have 2 DataTables in different layers on a page, one of which is an Editor DataTable. Both are not viewable together (one is a summary with fewer fields, one is the actual, editable table). What I want to do is update an edited row in the Editor instance also in the summary table (client-side only, Editor takes care of the server-side data writing/saving).
Here's what I'm doing:
[code]
var oTable = $('#summaryTable).dataTable(); /* More settings in there but not important */
editor.on('onPostEdit', function ( settings, json ) {
/*** Do some modifications with the json data ***/
oTable.fnDeleteRow( $('#summaryTable tr[id='+id+']')[0], null, true );
oTable.fnAddData([ /**Data modified above from json**/ ]);
oTable.fnDraw();
[/code]
The above DOES work, however it SEEMS that I should simply be able to do the following:
[code]
var oTable = $('#summaryTable).dataTable(); /* More settings in there but not important */
editor.on('onPostEdit', function ( settings, json ) {
/*** Do some modifications with the json data ***/
oTable.fnUpdate([ /**Data modified above from json**/ ], id);
[/code]
However, I get [quote]TypeError: f.aoData[b] is undefined[/quote] from jQuery.dataTables.min.js every time with the above. Of note I'm passing DT_RowId in my AJAX data from the server to the dataTable, but I've worked with the id variable and cannot get around this.
[quote]Hold on[/quote]
Solved. I'll post this anyway in case anyone else runs into this one - it wasn't clear to me from the documentation/examples, but makes sense now.
For fnUpdate, the row id needs to be passed in full - I was literally just passing the row number just like I was using for DT_RowId (i.e., 10). Adding in the full jQuery selector works just fine, as in:
[code]
oTable.fnUpdate([ /**Data modified above from json**/ ], id); // <= WRONG
oTable.fnUpdate([ /**Data modified above from json**/ ], $('#summaryTable tr[id='+id+']')[0]); // <= CORRECT, works
[/code]
Cheers,
Chris
This discussion has been closed.
Replies
The old API in 1.9- requires nodes to be passed in. The new API in 1.10+ does allow jQuery selectors - for example `table.row( '#'+id ).data( [ new data...] ).draw();` .
Allan