Updating non-ajax JavaScript Sourced Data tables

Karl_S

I am doing client side tables and using Editor. I am creating a dashboard which has multiple tables. Some of these are inter-related. So I would like to have a table update, if applicable, when a different table is edited. For instance, if an Expense is entered, then have a Budget table adjust accordingly.

Currently I create a table by adding each row/cell item and save attributes to the cell to determine exactly what was edited and save the data back to server side. I have since seen the ability to use JavaScript Sourced Data (Objects) via the data and also how to allow for nested data returned in the edited item which I grab at post submit. From here I could invoke changes to appropriate objects which are associated with a table. I have found that updating the object does not update the table. The only thing I have found to redraw the table has been ajax.reload() but that doesn't seem to apply here since I am not invoking the ajax option to begin with. So what am I missing? Am I served just as well to add a new row to the existing tables instead? This is the easiest option I see currently due to the use of data attributes on each cell to define what table and entry is changed and what field to set to Ignore on a Delete but am I better off using the JavaScript Sourced Data?

Karl S

allan

I have found that updating the object does not update the table.

Correct. DataTables doesn't "observe" changes on objects. You need to tell DataTables that the data in the object has changed either through the row().invalidate() or cell().invalidate() methods (or their plural versions - e.g. table.rows().invalidate().draw() will reread the data source for all rows).

Allan

Karl_S

Thank you for that direction, Alan, It works well for a changed object. But it doesn't seem to work if an object is added to add another row. So I am guessing I need to use either row().add() or rows().add() to add the new object items to the table. I tried using
$('#myTable').DataTable().rows().invalidate(workStudyPositions.Canada.current).clear().draw()
but ended up with an empty table. Same if I do not pass the object to rows.().invalidate().
I do currently have it changing any items in the object which I change, just not adding additional rows, so I am close. I will also need to possibly delete rows. I thought a redraw based on the objects contents should do this but cannot figure that out.

colin

Hi @Karl_S ,

but ended up with an empty table

Yep, you're selecting all rows (no args to rows()), then clear() clears the table of all data. Also, invalidate() doesn't take an arg list that, see usage.

Try breaking the joined methods, that'll help to understand their usage.

Cheers,

Colin

Karl_S

So which piece do I use after clear to recreate the table with the current version of the object including possible additional row(s)? Currently I am doing this to add 1 row after editing any of the items in the original object and adding the information to the object as well:

$("#myTable").DataTable().row.add(objThisPosition);
$("#myTable").DataTable().rows().invalidate().draw();

or, if there are multiple new rows, use:

$("#myTable"').DataTable().rows().add(objThesePositions).invalidate().draw();

But I would rather just add and edit the original object

allan

I'm not clear on why you would add a row and then attempt to immediately invalidate it and the other rows in the table. If you have an object instance that you have changed properties of, just invalidate that individual row.

Here is a little example: http://live.datatables.net/tikaxozo/1/edit

After 1 second I update the allan instance to change the name and then use rows().invalidate() to tell the table that it needs to reread the data. I could have it update on a specific row, but I've been a touch lazy there ;-).

Allan

Karl_S

If I am editing a row and adding a row (because of actions which happened elsewhere) then I need to get both the edited data and the added row into the table. I could keep track of and invalidate the row instead of the entire table but I may have multiple rows change. So I apparently need to add the row(s) to get them in and then invalidate the table to get the edited items in. And if I delete a row I would need to do that inside there as well, but I think I may end up just hiding these based on an Ignore column being set to true.

I was looking to save any changes and edit the table(s). I imagine you are expecting that I would send edits to an effected table(s) with each possible change. Honestly I have not decided when the change occurs but I was thinking after data is sent to the server and the server responds with acknowledgement of the change. Otherwise I need to back things out if an error in the save occurs.

Karl