Changing row data dynamically

Changing row data dynamically

Deuce14Deuce14 Posts: 5Questions: 0Answers: 0
edited March 2014 in DataTables 1.10
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

Replies

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Yup - bob on. Thanks for updating your question with the solution.

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