Multiple nested datatables auto expaned builded based on ajax calls

tKazatel

Hello,

I have plan to create complex table which require 3 level nested tables, number of rows is dynamic, number of columns is the same but different based on nested level.

I found this threads

https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html

      responsive: {
          details: {
              display: $.fn.dataTable.Responsive.display.childRowImmediate,
              type: 'none',
              target: '',
            },
        },

https://datatables.net/examples/api/row_details.html
for nested rows

My table structure should looks like follow

volume = level1
qtree = level 2
export = level 3

volume can have multiple qtrees, qtree can have multiple exports

volume	volume rename	mount	unmount
v1	v1r_task	v1m_task	v1un_task

qree	qtree rename	qtre policy
q1	q1r_tasks	q1p_task

export	export policy
e1	e1_task

q2|q2r_task|q2p_task

export	export policy
e2	e2_task

v2|v2r_task|v2m_task|v2un_task
...

    var nasTasksTable = $('#nas_tasks_table').DataTable({
      responsive: {
          details: {
              display: $.fn.dataTable.Responsive.display.childRowImmediate,
              type: 'none',
              target: '',
            },
        },
      ajax: {
        url: '/nasmigrations/sevmtt',
        type: 'POST',
        datatype: 'json',
        contenType: 'application/json',
        data: function (d) {
          d.method = 'NAStasks';
          d.winhost = winhost;
          d.project = project;
          d.id = id;
          d = JSON.stringify(d);
          return d;
        },
      },
      deferRender: true,
      columns: [{
          title: 'volume',
          data: 'volume',
        },
        {
          title: 'volume rename',
          data: 'vrename',
        },
        {
          title: 'mount',
          data: mount,
        },
        {
          title: 'unmount',
          data: unmount,
        },
      ],
     ],
    });
  }
});

then not sure if I should create function which will be places by some callback or where I should put this.

    function qtree_level2(rowData) {
      var subtableId = 'subtable-' + rowData.volume;
      var table = $('<table/>')
        .addClass('inside-table table-bordered table-striped table-hover compact nowrap')
        .attr('id', subtableId);
      var javaObject = {
        method: 'qtree_details',
        voluje: rowData.DT_RowId,
      };

      var jsonObject = JSON.stringify(javaObject);
      $.ajax({
        url: '/nasmigrations/sevmtt'',
        type: 'POST',
        data: jsonObject,
        success: function (data) {

          if (data) {
            var datatable = table.DataTable({
              destroy: true,
              data: data,
              searching: false,
              paging: false,
              info: false,
              columns: [{
                  title: 'qree',
                  data: 'qree',
                },
                {
                  title: 'qtree rename',
                  data: 'qrename',
                },
                {
                  title: 'qtre policy',
                  data: 'qpolicy',
                },

              ],
            });

          } else {
            table.append('<td>no data</td>')
              .removeClass('table-bordered table-striped table-hover compact nowrap');
          }
        },
      });

      return table;
    }

once volume row is drawn, then qtree ajax is called for volume row id to get all qtrees related to that volume, once first qtree is drawn , then ajax for qtree row id is called to get all export and drawn them all.then continue next qtree and exports untill all are drawned , then move to next volume untill all data are presented.

I have no idea if this is possible to achieve with datatables, but any advice is welcomed.

kthorngren

Note that Responsive and Child Detail Rows are different. The Compatibility Matrix states this regarding simultaneously using Responsive and Child Detail Rows:

Responsive's modal display option should be enabled if used with child rows, as the default display method is to use child rows, which would override 'user space' use of child rows.

The Ajax Loaded Child Detail blog may help you with loading child rows via ajax. The Parent / child editing in child rows blog will show you how you can create child rows that are Datatables. If you are not using Editor with them you can ignore that portion of the config.

Hope this helps get you started.

Kevin

tKazatel

Thank you for update.

I already made version where I can click and it pull additional data and add child.

But I would like to do it without clicking and automaticaly shown.

Like I have been thinking if I can put it inside rowcallback function , so after each row I would do another ajax call to pull additional information.

tKazatel

I made it over rowCallback, sharing if anybody else have same problem.
There is main volume table which have refresh interfal set to 10sec, Qtree level2 and iside Exports level3. there is empty row, but that is because I didn't complete this solution , it require some additional filtering on server side.
I will be presenting tasks statuses executed asynchronously by celery.

If you guys find better way to do that, please share as well. I would be glad to learn something new.

JS

function NAStasks(winhost, project, id) {
    var nasTasksTable = $('#nas_tasks_table').DataTable({
      ajax: {
        url: '/nasmigrations/sevmtt',
        type: 'POST',
        datatype: 'json',
        contenType: 'application/json',
        data: function (d) {
          d.method = 'NAStasks_volume';
          d.winhost = winhost;
          d.project = project;
          d.id = id;
          d = JSON.stringify(d);
          return d;
        },
      },
      deferRender: true,
      columns: [{
          title: '7mode vol',
          data: 'SevModVolume',
        },
        {
          title: 'Cdot vol',
          data: 'avol',
        },
      ],
      rowCallback: function (row, data) {
        nasTasksTable.row($(row)).child(QtreeL2(row, data)).show();
      },

      createdRow: function (row, data, index) {
          console.log('test');
        },
    }
  );

    function QtreeL2(row, data) {
      var subtableId = 'subtable-' + data.SevModVolume;
      var table = $('<table/>')
        .addClass('inside-table table-bordered table-striped table-hover compact nowrap')
        .attr('id', subtableId);

      var datatable = table.DataTable({
          ajax: {
            url: '/nasmigrations/sevmtt',
            type: 'POST',
            datatype: 'json',
            contenType: 'application/json',
            data: function (d) {
              d.method = 'NAStasks_qtree';
              d.id = data.DT_RowId;
              d = JSON.stringify(d);
              return d;
            },
          },
          deferRender: true,
          columns: [{
              title: 'SevModQtree',
              data: 'SevModQtree',
            },
            {
              title: 'ClusterQtree',
              data: 'ClusterQtree',
            },
          ],
          rowCallback: function (row, data) {
            datatable.row($(row)).child(ExportsL3(row, data)).show();
          },
        });
      return table;
    }

    function ExportsL3(row, data) {
      var subtableId = 'subtable-' + data.SevModQtree + '_' + data.DT_RowId;
      var table = $('<table/>')
        .addClass('inside-table table-bordered table-striped table-hover compact nowrap')
        .attr('id', subtableId);

      var datatable = table.DataTable({
          ajax: {
            url: '/nasmigrations/sevmtt',
            type: 'POST',
            datatype: 'json',
            contenType: 'application/json',
            data: function (d) {
              d.method = 'NAStasks_export';
              d.id = data.DT_RowId;
              d = JSON.stringify(d);
              return d;
            },
          },
          deferRender: true,
          columns: [{
              title: 'Path',
              data: 'Path',
            },
            {
              title: 'createPolicyId',
              data: 'createPolicyId',
            },
          ],
        });
      return table;
    }

    intervalObj = setInterval(function () {
      nasTasksTable.ajax.reload(null, false); // user paging is not reset on reload
    }, 10000);

  }

HTML

          <div id='nas_tasks' class='col-md-8 hidden'>
            <table class='compact nowrap table' id='nas_tasks_table' width='100%'> </table>
            <div class='row'>

colin

Hi @tKazatel ,

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