Reload nested datatables and open shown rows

sarthaks21 · June 2020

Hey Everyone!
I have used nested datatables upto 2 levels. There is a datatable inside each row of which is another datatable inside each row of which there is another datatable. Data Source is ajax json. The question that I want to ask is how to update all the tables? ajax.reload closes all the rows on refresh.
Tried this

http://live.datatables.net/qolevune/1/edit

,the row opens but the datatable does not appear.

Any ideas as to what would work?

Thanks !

kthorngren · June 2020

Your example doesn't show Datatables in the child but the same basic process should work with child datatables.

Data Source is ajax json.

Are you saying each chilld row has their own -optoin ajax config?

The question that I want to ask is how to update all the tables?

Thats a broad question depending on what you really have. Can you update the test case to closer represent what you have?

the row opens but the datatable does not appear.

What is the data source for these Datatables? Ajax request or data from the main table?

Kevin

sarthaks21 · June 2020

@kthorngren here is the code with the nested table

  table =  $('#example').DataTable(
    {
        //"processing" : true,
        'createdRow': function(row, data, dataIndex){
            $('td:eq(1)', row).css('min-width', '250px');//analyst
            $('td:eq(2)', row).css('min-width', '25px');//ExpDt
            $('td:eq(3)', row).css('min-width', '25px');//LExp
            $('td:eq(4)', row).css('min-width', '25px');//SExp
            $('td:eq(5)', row).css('min-width', '25px');//NExp
            $('td:eq(6)', row).css('min-width', '25px');//CumPL
            $('td:eq(7)', row).css('min-width', '25px');//DayPL
            $('td:eq(8)', row).css('min-width', '0.5px');//+1
            $('td:eq(9)', row).css('min-width', '0.5px');//-1
            $('td:eq(10)', row).css('min-width', '0.5px');//+2
            $('td:eq(11)', row).css('min-width', '0.5px');//-2
            $('td:eq(12)', row).css('min-width', '0.5px');//5
            $('td:eq(13)', row).css('min-width', '0.5px');//-5
            $('td:eq(14)', row).css('min-width', '0.5px');//10
            $('td:eq(15)', row).css('min-width', '0.5px');//-10
            $('td:eq(16)', row).css('min-width', '0.5px');//20
            $('td:eq(17)', row).css('min-width', '0.5px');//-20
            $('td:eq(18)', row).css('min-width', '25px');//Mrgn
            $('td:eq(19)', row).css('min-width', '25px');//ntmrgn
        },
        "ajax" : {
            "url" : "static/tableviewer/ajax/table_contents.json",
            'dataSrc' : 'data_root'
        },
        searching: false,
        paging: false,
        bInfo: false,
       //  responsive: {
       //     details: {
       //         type: 'column',
       //         target: 'tr'
       //     }
       // },
       // columnDefs: [ {
       //      className: 'control',
       //      orderable: false,
       //      targets:   0
       //  } ],
        columns: columns_datatable,


    });

///////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////
  $('#example tbody').on('click', 'td.details-control, td.control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
    var rowData = row.data();

    if ( row.child.isShown() ) {
      // This row is already open - close it
      rows_open -= 1;

      row.child.hide();
      tr.removeClass('shown');
      $('#level_1_' + rowData.AnalystCode).DataTable().destroy();
    }
    else {
        // Open this row
        rows_open += 1;

        row.child( format(rowData) ).show();
        id = (rowData.AnalystCode).split(" ").join("");
        let sourceData1 = "data_mid." + id;
        //check name of the format section and name of the datatable
        ///////////////////////////////////////////////////////////////////////
        ///////////////////////////////////////////////////////////////////////
        ///////////////////////////////////////////////////////////////////////
        child_level_1 = $('#level_1_'+id).DataTable(
          {
            'createdRow': function(row, data, dataIndex){
                $('td:eq(1)', row).css('min-width', '250px');//analyst
                $('td:eq(2)', row).css('min-width', '25px');//ExpDt
                $('td:eq(3)', row).css('min-width', '25px');//LExp
                $('td:eq(4)', row).css('min-width', '25px');//SExp
                $('td:eq(5)', row).css('min-width', '25px');//NExp
                $('td:eq(6)', row).css('min-width', '25px');//CumPL
                $('td:eq(7)', row).css('min-width', '25px');//DayPL
                $('td:eq(8)', row).css('min-width', '0.5px');//+1
                $('td:eq(9)', row).css('min-width', '0.5px');//-1
                $('td:eq(10)', row).css('min-width', '0.5px');//+2
                $('td:eq(11)', row).css('min-width', '0.5px');//-2
                $('td:eq(12)', row).css('min-width', '0.5px');//5
                $('td:eq(13)', row).css('min-width', '0.5px');//-5
                $('td:eq(14)', row).css('min-width', '0.5px');//10
                $('td:eq(15)', row).css('min-width', '0.5px');//-10
                $('td:eq(16)', row).css('min-width', '0.5px');//20
                $('td:eq(17)', row).css('min-width', '0.5px');//-20
                $('td:eq(18)', row).css('min-width', '25px');//Mrgn
                $('td:eq(19)', row).css('min-width', '25px');//ntmrgn
            },
            ajax: {
              url: "static/tableviewer/ajax/table_contents.json",
              dataSrc: sourceData1
            },
            searching: false,
            paging: false,
            ordering: false,
            bInfo: false,
            // select: true,
            columns: [
            {
              "className": 'details-control_1',
              "orderable": false,
              "data":null,
              "defaultContent": '',
              "width": "2%"
            },
            {"data" : "AnalystCode", "width": "8%"},
            {"data" : "ExpDt", "width": "5%"},
            {"data" : "LExp", render: colorData, "width": "6.5%"},
            {"data" : "SExp", render: colorData, "width": "7%"},
            {"data" : "NExp", render: colorData, "width": "7%"},
            {"data" : "CumPL", render: colorData, "width": "6%"},
            {"data" : "DayPL", render: colorData, "width": "6%"},
            {"data" : "PPL-1%", render: colorData, "width": "4%"}, {"data" : "PPL+1%", render: colorData, "width": "4%"},
            {"data" : "PPL-2%", render: colorData, "width": "4%"},
            {"data" : "PPL+2%", render: colorData, "width": "4%"}, {"data" : "PPL-5%", render: colorData, "width": "4%"},
            {"data" : "PPL+5%", render: colorData, "width": "4%"}, {"data" : "PPL-10%", render: colorData, "width": "4%"},
            {"data" : "PPL+10%", render: colorData, "width": "4.75%"}, {"data" : "PPL-20%", render: colorData, "width": "4%"},
            {"data" : "PPL+20%", render: colorData, "width": "4.75%"},
            {"data" : "Mrgn", "width": "5%", render: colorData}, {"data" : "Nt Mrgn", "width": "5%", render: colorData}
          ],
          }
        );
        ///////////////////////////////////////////////////////////////////////
        ///////////////////////////////////////////////////////////////////////
        ///////////////////////////////////////////////////////////////////////
          //level0_to_1(rowData, tr);
        tr.addClass('shown');
    }

  });

  $('tbody').on('click', 'td.details-control_1', function(){
    var tr2 = $(this).closest('tr');
    var row2 = child_level_1.row(tr2);
    var rowData2 = row2.data();
    let tablename_ = (rowData2.AnalystCode).split(" ").join("") ;

    if (row2.child.isShown()) {
      // This row is already open - close it
      row2.child.hide();
      tr2.removeClass('shown');

      // Destroy the Child Datatable
      $('#level_2_' + tablename_).DataTable().destroy();
    }
    else {
      // Open this row
      row2.child(format2(rowData2, id)).show();
      let sourceData3 = "data_leaf."+tablename_;
      // var id2 = rowData2.AnalystCode;
      ///////////////////////////////////////////////////////////////////////
      ///////////////////////////////////////////////////////////////////////
      ///////////////////////////////////////////////////////////////////////
      child_level_2 = $('#level_2_' + tablename_+id).DataTable({
        
      ajax: {
        url:  "static/tableviewer/ajax/table_contents.json",
        dataSrc: sourceData3
      },
      searching: false,
      paging: false,
      ordering: false,
      bInfo: false,
      // select: true,
      columns: [
        {"data" : "AnalystCode", "width": "10%"},
        {"data" : "ExpDt", "width": "7%"},
        {"data" : "LExp", render: colorData, "width": "6%"},
        {"data" : "SExp", render: colorData, "width": "7%"},
        {"data" : "NExp", render: colorData, "width": "7%"},
        {"data" : "CumPL", render: colorData, "width": "6%"},
        {"data" : "DayPL", render: colorData, "width": "5%"},
        {"data" : "PPL-1%", render: colorData, "width": "4%"}, {"data" : "PPL+1%", render: colorData, "width": "4%"},
        {"data" : "PPL-2%", render: colorData, "width": "4%"},
        {"data" : "PPL+2%", render: colorData, "width": "4%"}, {"data" : "PPL-5%", render: colorData, "width": "4%"},
        {"data" : "PPL+5%", render: colorData, "width": "4%"}, {"data" : "PPL-10%", render: colorData, "width": "4%"},
        {"data" : "PPL+10%", render: colorData, "width": "4.75%"}, {"data" : "PPL-20%", render: colorData, "width": "4%"},
        {"data" : "PPL+20%", render: colorData, "width": "4.75%"},
        {"data" : "Mrgn", "width": "5%", render: colorData}, {"data" : "Nt Mrgn", "width": "5%", render: colorData}
      ],
    });
      ///////////////////////////////////////////////////////////////////////
      ///////////////////////////////////////////////////////////////////////
      ///////////////////////////////////////////////////////////////////////
      tr2.addClass('shown');
    }
  });

This is what I'm using to refresh the table

setInterval( function () {
~~~~    

        table.ajax.reload();




}, 1000 );

kthorngren · June 2020

ajax.reload closes all the rows on refresh.

Maybe this thread asking the same question will help.

Kevin

sarthaks21 · June 2020

@kthorngren the thread uses normal rows instead of a table inside a row.
I want the child table to be displayed even after data refresh.
I've tried many things but it just isn't working! Cannot change the implementation as this is the required format.

colin · June 2020

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren · June 2020

the thread uses normal rows instead of a table inside a row.

The contents of the child rows doesn't matter. The same process will work whether your child rows contain list elements, HTML tables or Datatables. As Colin mentioned if you are unable to get it working then please build a test case so we can help.

Kevin

sarthaks21 · June 2020

Hey @colin and @kthorngren , as requested by you, I am adding a test case. This shows the structure of the datatable I require. I want to refresh the data every few seconds. The rows collapse on ajax.refresh(). Is there any other way I can approach to the solution?

http://live.datatables.net/mukirowi/1/edit

I think this will clear quite a few things.
Thanks for sticking with this problem for so long! Appreciate it!

kthorngren · June 2020

I took the code in the example I linked to and used it as the basis for this example:
http://live.datatables.net/nuhopemu/1/edit

Had to add the use of xhr and changed the draw to use .one() instead of .on(). Currently it supports only the first level of child rows. Its hardcoded for the cl id's. It is meant as an example not the full solution. I leave it to you to work out the full solution. However if you have questions let us know. Somethings to look at:

When opening the first level child row use the same basic process to check to see if that Datatable has child rows open. If so then open them and check for open child rows.
The process of reopening the child rows causes each child row to fetch its data via Ajax. This might be needed. If not and if its slow you may want to look at a way to store the child table data so it can be fetched locally when reopening.
Create functions to build the child Datatables to reduce duplicated code.

HTH,
Kevin

sarthaks21 · June 2020

@kthorngren thanks! Will try this out and let you know.
Thanks big time .

sarthaks21 · July 2020

@kthorngren hey man!
I went though the code you linked to : http://live.datatables.net/nuhopemu/1/edit

Can you please explain whats going on in the button click function

  $('button').on('click', function () {
    // Get shown rows
    childRows = table.rows($('.shown'));
    
    childRowsData = {};
    childRows.every(function ( rowIdx, tableLoop, rowLoop ) {
      var 
      childRowsData[]
    }
    
    table.ajax.reload();
  });

kthorngren · July 2020

Can you please explain whats going on in the button click function

A syntax error :-) I'm not sure what happened but the example code got corrupted. I fixed it here and added some comments:
http://live.datatables.net/nuhopemu/4/edit

Kevin

sureshangraa · July 2020

Hi all,
All solutions are very impressive. I am also working on nested table in response table only for html (static) but unable to do it. Please help me out from it.

sarthaks21 · July 2020

@sureshangraa sure! I've spent almost 3 months working on datatables!

colin · July 2020

@sureshangraa We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

sarthaks21 · July 2020

Hey! Been working on the solution provided by @kthorngren . It works as needed. The row is now getting refreshed and it stay's open.

 setInterval(function(){

    childRows = table.rows($('.shown'));
    childRowsData = {};
    childRows.every(function ( rowIdx, tableLoop, rowLoop ) {
      // Get clientID of parent
      var id = this.data().AnalystCode.split(" ").join("");

      var data_from_array = $.ajax({
        type: 'GET',
        url: 'static/tableviewer/ajax/table_contents.json',
        async: false,
        dataType: 'json',
      });

      var temp = data_from_array.responseJSON.data_mid;
      temp = $(temp).toArray()[0][id];
      // Get corresponding child DT API
      var childDataTable = $('#level_1_' + id).DataTable();

      // childRowsData[id] = childDataTable.data().toArray();
      childRowsData[id] = temp;
    });

Used the ajax call to get the latest data for the 2nd level table.

I'm now facing problem in keeping the 3rd level rows open. I've attached a photo in which I've shown the 3 levels.

This is what I am trying

$('button').on('click', function () {
  var grand_child_shown = null;
  childRows = table.rows($('.shown'));    //--> Abby is shown
  childRowsData = {};
  childRows.every(function ( rowIdx, tableLoop, rowLoop ) {
  // Get clientID of parent
  var id = this.data().AnalystCode.split(" ").join("");

  var data_from_array = $.ajax({
      type: 'GET',
      url: 'static/tableviewer/ajax/table_contents.json',
      async: false,
      dataType: 'json',
    });
    var temp = data_from_array.responseJSON.data_mid;
    temp = $(temp).toArray()[0][id];
    // Get corresponding child DT API

    var childDataTable = $('#level_1_' + id).DataTable();
    grand_child_shown = childDataTable.rows($('.shown')); //--> 5A is shown
    // var grand_child_rows_data = {};

    // childRowsData[id] = childDataTable.data().toArray();
    childRowsData[id] = temp;

  });

$('#example').DataTable().ajax.reload();

  grand_child_shown.every(function(rowIdx, tableLoop, rowLoop ){
    // if(this.child.isShown()){
    //   alert("shown");
    // }
    // else{
    //   alert("not shown");
    // }
//this == row2
    var one = this.data();
    var two = one.AnalystCode;
    var tr2 = $(this).closest('tr');
    var gchDT = $('#level_2_' + two.split(" ").join("")).DataTable();
    gchDT.destroy();
    this.child.hide();
    tr2.removeClass('shown');
    this.child($(format2(one))).show();

    // this.addClass('shown');

  });

});

I'm storing the shown rows of Level 2 before refreshing and after both Level 1 and Level 2 have refreshed with new data, I want to iterate over all the shown rows in L2 and open them.
Please ask for any clarifications.
Thanks guys!

sarthaks21 · July 2020

Hey everyone! Been working on the code given by @kthorngren . It's been working perfectly. Level 1(L1) is refreshed and the expanded rows remain open and I use ajax call to update them as well with the latest data from the json file.

setInterval(function(){
  
    childRows = table.rows($('.shown'));
    childRowsData = {};
    childRows.every(function ( rowIdx, tableLoop, rowLoop ) {
      // Get clientID of parent
      var id = this.data().AnalystCode.split(" ").join("");
  
      var data_from_array = $.ajax({
        type: 'GET',
        url: 'static/tableviewer/ajax/table_contents.json',
        async: false,
        dataType: 'json',
  
      });
  
      var temp = data_from_array.responseJSON.data_mid;
      temp = $(temp).toArray()[0][id];
      // Get corresponding child DT API
      var childDataTable = $('#level_1_' + id).DataTable();
  
  
  
      // Save in global object using parent ID as key
      // childRowsData[id] = childDataTable.data().toArray();
      childRowsData[id] = temp;
    });

$('#example').DataTable().ajax.reload();
    //table.ajax.reload();

}, 5000);

The problem is that now the Level 3 (L3) table is hidden on refresh. I've used the following approach:

$('button').on('click', function () {
  var grand_child_shown = null;
  childRows = table.rows($('.shown'));    //--> Abby is shown
  childRowsData = {};
  childRows.every(function ( rowIdx, tableLoop, rowLoop ) {
  // Get clientID of parent
  var id = this.data().AnalystCode.split(" ").join("");

  var data_from_array = $.ajax({
      type: 'GET',
      url: 'static/tableviewer/ajax/table_contents.json',
      async: false,
      dataType: 'json',
    });
    var temp = data_from_array.responseJSON.data_mid;
    temp = $(temp).toArray()[0][id];
    // Get corresponding child DT API

    var childDataTable = $('#level_1_' + id).DataTable();
    grand_child_shown = childDataTable.rows($('.shown')); //--> 5A is shown
    // var grand_child_rows_data = {};

    // childRowsData[id] = childDataTable.data().toArray();
    childRowsData[id] = temp;

  });

$('#example').DataTable().ajax.reload();

  grand_child_shown.every(function(rowIdx, tableLoop, rowLoop ){
    // if(this.child.isShown()){
    //   alert("shown");
    // }
    // else{
    //   alert("not shown");
    // }
//this == row2
    var one = this.data();
    var two = one.AnalystCode;
    var tr2 = $(this).closest('tr');
    var gchDT = $('#level_2_' + two.split(" ").join("")).DataTable();
    gchDT.destroy();
    this.child.hide();
    tr2.removeClass('shown');
    this.child($(format2(one))).show();
    //this.show();
    //this.addClass('shown');

  });

});

I'm saving the rows shown in L2 before updating it. Afterwards, I'm iterating over all the open rows and trying to open the row and draw the HTML table using format2 function.

Please ask for any clarifications. Thanks for reading and helping. You've been a great help.

colin · July 2020

@sarthaks21 We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

sarthaks21 · July 2020

@colin here you go!
Check out the $('button').on('click' section. The 2nd level table having id as 'mt' is not expanding to show the 3rd level table having table id as 'in'.
Please refer to the image in the last comment if there is any confusion.

http://live.datatables.net/nuhopemu/9/edit

kthorngren · July 2020

You are getting this error:

runner:301 Uncaught TypeError: Cannot read property 'split' of undefined

The problem is with this statement:

'''js
var gchDT = $('#in' + two.split(" ").join("")).DataTable();//stores the open 3rd level table


I added a console.log here:

```js
    var one = this.data();
    console.log('one', one)
    var two = one.AnalystCode;

The variable one has this object but no AnalystCode property:

{matterID: "36526-446", matterName: "v. Dick et al.", invoice: 5964904, invDate: "7/28/2018", wip: "$887,935 ", …}
ar: "$836,222"
ar0_30: "$462,655"
ar31_60: "$323,092"
ar61_90: "$44,068"
ar91_120: "$5,530"
ar121_: "$861"
invDate: "7/28/2018"
invoice: 5964904
matterID: "36526-446"
matterName: "v. Dick et al."
suspense: "$9,352"
wip: "$887,935 "

I don't find AnalystCode anywhere else in the example JS.

Kevin

sarthaks21 · July 2020

Oh! My bad! The analyst code property is from my development script. I'm using this as an example. How do you suggest I go from here

http://live.datatables.net/nuhopemu/4/edit

I want the table with id as 'mt' (i.e. 3rd level tables) to remain open when I refresh the data. Leave the last level (i.e. table id 'in')

kthorngren · July 2020

Currently in your 'button' click handler you have this:

 childRowsData[id] = childDataTable.data().toArray();

In your previous example you had code to get the child rows of the childDataTable. Do that again. But instead of childRowsData[id] being an array make it an object, something like this:

childRowsData[id] = {
  childData: childDataTable.data().toArray(),
  openChildren: array of open children
}

I would consider making the openChildren object(s) look the same as the above. Then make a function to iterate through the objects to reopen the rows. This may not be the best structure. You will need to experiment with what works best. If you use a recursive function you can probably make this pretty simple and the depth of open children won't matter. Maybe this recursive function tutorial will help.

Kevin

sarthaks21 · July 2020

Is there not a similar approach as the one used for the 1st level table reload and reopening of rows?

var childDataTable = $('#cl' + id).DataTable();
grand_child_shown = childDataTable.rows($('.shown'));

//pseudo code
for each grand_child_shown(){
open row;
add datatable to it;
}

kthorngren · July 2020

Yes, you will use exactly the same approach. I'm suggesting that you save the grand_child data in the childRowsData[id] object along with the child row data ( childDataTable.data().toArray() ). This way when you iterate childRowsData to open and display its row data you can also iterate the grand_child rows and open and show their data.

Kevin

sarthaks21 · July 2020

I'm facing trouble with opening (showing) the rows of 2nd level table (table id = mt). Any suggestions? I'm using this but it's not working

grand_child_shown.every(function(rowIdx, tableLoop, rowLoop ){
    // if(this.child.isShown()){
    //   alert("shown");
    // }
    // else{
    //   alert("not shown");
    // }
//this == row2
    var one = this.data();
    var two = one.matterName;
    var tr2 = $(this).closest('tr');
    var gchDT = $('#mt' + two.split(" ").join("")).DataTable();
    gchDT.destroy();
    this.child.hide();
    tr2.removeClass('shown');
    this.child($(format2(one))).show();
    //this.show();
    //this.addClass('shown');
 
  });

Any suggestions as to what I'm doing wrong?

kthorngren · July 2020

Please post an example of what your are doing. Its much easier to understand your code when its with the context of the solution.

Kevin

sarthaks21 · July 2020

Here you go
Changes in the button on click section :

http://live.datatables.net/nuhopemu/14/edit

This should at least open the row and then I can define the datatable with the required data. But the row does not open.

sarthaks21 · July 2020

Hey @kthorngren ! I've tried this approach

http://live.datatables.net/nuhopemu/25/edit

The problem I'm facing is that

_row.child( format2(_rowData) ).show();

should open the row. It will not show any content but it should open at least.

The row is not opening only.

kthorngren · July 2020

When I open a row and click the Reload button I see this error in the browser's console:

Uncaught ReferenceError: childDataTable is not defined

This is causing the script to stop even with just one level open. Start by fixing this.

Kevin

sarthaks21 · July 2020

@kthorngren here you go,

http://live.datatables.net/nuhopemu/31/edit

I'm not able to view the output tab in jsbin. Any idea why that might be?

Anyways, please guide how to proceed from the above link. The

_row.child(format2(_rowData)).show();

is not working

kthorngren · July 2020

With 2 levels open you are getting this error:

runner:371 Uncaught TypeError: Cannot read property 'split' of undefined

Please use the browser' console to find and fix Javascript errors.

I'm not able to view the output tab in jsbin.

Did you click the 'Output` button? I don't know why you wouldn't be able to see it. I've not had that problem.

Kevin

Reload nested datatables and open shown rows

Reload nested datatables and open shown rows

Answers

Howdy, Stranger!

Categories

DataTables

Reload nested datatables and open shown rows

Reload nested datatables and open shown rows

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables