update data in nested datatable

update data in nested datatable

ZeghraZeghra Posts: 20Questions: 4Answers: 0

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');

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,275Questions: 26Answers: 4,765

    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

  • ZeghraZeghra Posts: 20Questions: 4Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,275Questions: 26Answers: 4,765

    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

  • ZeghraZeghra Posts: 20Questions: 4Answers: 0

    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

  • ZeghraZeghra Posts: 20Questions: 4Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,275Questions: 26Answers: 4,765
    Answer ✓

    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

  • ZeghraZeghra Posts: 20Questions: 4Answers: 0

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

  • ZeghraZeghra Posts: 20Questions: 4Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,275Questions: 26Answers: 4,765
    edited November 2021 Answer ✓

    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

  • ZeghraZeghra Posts: 20Questions: 4Answers: 0

    Thank you Thank you Thank you

Sign In or Register to comment.