update data in nested datatable

Zeghra

I use table with nested table: http://live.datatables.net/bihawepu/4370/edit
I update table like this:
var completetable = table.rows().data();

I check each elements

for (var i = 0; i < completetable .length; i++) {

If data id of object that needs to be updated is found in complete table:

if (completetable[i]._id + "" === data._id + "") {

update data in row with row index: table.rows()[0][i])

table.row(table.rows()[0][i]).data(data).draw()

When the nested table is opened (it shows '-' button on left of row) and when I update table, it changes the sign to + and still keep the nested table open. It changes data, but I want to keep the "-" as it was since nested table is opened.
I tried with such without success:
var tr = table.row(table.rows()[0][i]).child().closest('tr');
var tdi = tr.find("i.fa");
var row = table.row(tr);
row.child(format(row.data())).show();
tr.removeClass('shown');
tdi.first().removeClass('fa-plus-square');
tdi.first().addClass('fa-minus-square');

kthorngren

I might be missing it but your test case doesn't show how the data is being updated.

Maybe this example from this thread will give you some ideas. If you still need help please provide the steps to show the problem in your test case.

Kevin

Zeghra

Thank you Kevin for your info. I found out this line changes the '-' to '+' table.row(table.rows()[0][i]).data(data).draw(false) even with draw(false).
table.rows()[0][i] is the row index. It changes the data in the row, but it also changes the '-' icon.
Can you help how to find 'tr' of updated row with row index? Then I can find tr.find("i.fa");

$('#mytable').closest('tr'), table.closest('tr'), table.row(table.rows()[0][i]).closest('tr') none of them are functions.

kthorngren

I updated the test case to show that updating a row with row().data() plus draw() doesn't affect the child row. Please update the test case to show the issue you are having so we can debug.

I found out this line changes the '-' to '+' table.row(table.rows()[0][i]).data(data).draw(false) even with draw(false).

Using draw(false) doesn't affect the child rows or the plus. All the false does is stay on the current page.

Kevin

Zeghra

Creating a live.datatables example is difficult for me. I use electron I have a callback(data) function on client side that is called from app.js (server side, more specifically from preload.js). When I get data on client side (normally in html script, but in electron it is renderer.js) then I can compare complete table rows here (var completetable = table.rows().data();) to updated row:
if (completetable[i]._id + "" === data._id + "") {
then this line runs: table.row(table.rows()[0][i]).data(data).draw(false) to change data in row that needs to be updated. This line changes the '-' icon also.

FYI table is the main datatable that is created when page opens (var table = $('#mytable').DataTable({. This table can be reached when update triggers. I can find nested table during update (when client side receive data from server) if I make nested table's variable global (let nestedtable at beginning of html script, which is the renderer.js in electron) and when nested table opens, it sets nested table globally nestedtable = $('#' + rowData._id).DataTable({, so I can update nested table data as well: nestedtable.cell(0,1).data(data.setups[0].graphic).draw(false);

Everything is working well, except the '-' '+' icon during update. I need to find tr for updated row and if nested table is opened then after update I need to set '+' to '-'
I tried to find tr like this:
$('#mytable').closest('tr'), table.closest('tr'), table.row(table.rows()[0][i]).closest('tr')but none of them are functions.

I can find tr only when it is clicked on '+' or '-':
$('#mytable tbody').on('click', 'td.details-control', function() {
var tr = $(this).closest('tr');, but during update there is no click on '+' or '-' to trigger this

Zeghra

The furthest I get on live.datatables:
http://live.datatables.net/bihawepu/5187/

If you extand the 2 row ('Angelica Ramos') then it rewrites data in main table's cells, but the red '-' here changes to red '+'. In my app it changes from red '-' to green '+' with opened nested table. None of them are good.

kthorngren

Thanks for the test case. The problem is using columns.render to display the FA symbols. Each draw this will run on updated rows. You will need to add some code to apply the classes after the row is drawn. Use drawCallback for this. For example:
http://live.datatables.net/bihawepu/5188/edit

Kevin

Zeghra

Thank you Kevin. It's working well now. Datatables.net is awesome!!!

Zeghra

One more question, how do you update data in nested table?
If more than 1 nested table is opened, the global variable nestedtable will be the one that was opened the last and not the one that needs to be updated.
Your example does not update nested table. Can you show update on that?
http://live.datatables.net/bihawepu/5189/edit

kthorngren

how do you update data in nested table?

You need to call the format() function in row().child().show(). The child details are not apart of the Datatables rows and you need to manage what is displayed.

Specific to your example, update the row data before showing it.
http://live.datatables.net/suxipazo/1/edit

Kevin

Zeghra

Thank you Thank you Thank you