Add new child rows

EMORRAS

Hello:
I want to add new child rows, similar to blog example at https://datatables.net/blog/2017-03-31 but can't make it work. The child rows has the same structure the parent table has, without the details-control column. My format function is

function format ( rowData ) {
    var fila = $('<tr/>')
        .addClass( 'loading' )
        .text( ' Cargando ... ' );

    $.ajax( {
        url: 'http://webservice/ajax.php',
        data: {
            exp: rowData["Expedition"]
        },
        dataType: 'json',
        type: 'post',
        success: function ( json ) {
      fila
        .rows.add(json)
        .draw()
        .removeClass( 'loading' );
        }
    } );
    return fila;
}

The code that call it it's the same as in blog entry, but I get fila.rows is undefined. Is rows.add() only for DataTable object?, How can I add new rows in this case? Should I use a DataTable inside the Datatable? (I tried it also, without luck)

function format ( rowData ) {
    var fila = $('<div/>')
        .addClass( 'loading' )
        .text( ' Cargando ... ' );
    $.ajax( {
        url: 'http://webservice/ajax.php',
        data: {
            exp: rowData["Expedition"]
        },
        dataType: 'json',
        type: 'post',
        success: function ( json ) {
                  fila
                    .html(fila.DataTable(
                    "columns": [
                      // Elliminated details-control colum
                      {"data": "Column1", "title": "Column1" },
                      {"data": "Column2", "title": "Column2"},
                      {"data": "Column3", "title": "Column3"}
                    ]
                    )
                    .draw()
                    .removeClass( 'loading' );
        }
    } );
    return fila;
}

Any clue or advice about what I'm doing wrong.

Thanks

EMORRAS

For the record, my html table is:

<div id="no-more-tables">
  <table class="myTable" id="myTable">
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
  </table>
</div>

Columns names and titiles are set with columns:[{data: , title: }]

tangerine

How are you calling your format() function? Are you sure you followed the example thoroughly?

EMORRAS

I think it's verbatim, except for table name

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

    if ( row.child.isShown() ){
      row.child.hide(); // La ocultamos
      tr.removeClass('shown'); 
    }
    else{
      row.child( format(row.data()) ).show;
      tr.addClass('shown');
    }
  });

kthorngren

You have this:

    var fila = $('<tr/>')
        .addClass( 'loading' )
        .text( ' Cargando ... ' );
 
    $.ajax( {
        url: 'http://webservice/ajax.php',
        data: {
            exp: rowData["Expedition"]
        },
        dataType: 'json',
        type: 'post',
        success: function ( json ) {
      fila
        .rows.add(json)
        .draw()
        .removeClass( 'loading' );
        }

fila is not a Datatables API instance so you can't use rows.add(). The example has this:

        success: function ( json ) {
            div
                .html( json.html )
                .removeClass( 'loading' );
        }

Are you wanting something that looks like this example?
https://datatables.net/examples/api/row_details.html

In the example you posted json.html has the data of interest. You will need to take whatever is returned in your json variable and structure like the row_details.html example or however you want it to look.

Hope this makes sense.

Kevin

EMORRAS

Yes and no, the rows to show has the same columns the table, they don't show additional info about the parent row, but new rows related to the parent.

If we have this table

Airi Satou Accountant Tokyo $162,700
Angelica Ramos Chief Executive Officer (CEO) London $1,200,000
Ashton Cox Junior Technical Author San Francisco $86,000
Bradley Greer Software Engineer London $132,000
Brenden Wagner Software Engineer San Francisco $206,850
Brielle Williamson Integration Specialist New York $372,000

And press the in "Bradley Greer" row, I want to get related data from my webservice (this part works, I get the new data)

Airi Satou Accountant Tokyo $162,700
Angelica Ramos Chief Executive Officer (CEO) London $1,200,000
Ashton Cox Junior Technical Author San Francisco $86,000
Bradley Greer Software Engineer London $132,000
Cara Stevens Sales Assistant New York $145,600
Cedric Kelly Senior Javascript Developer Edinburgh $433,060
Brenden Wagner Software Engineer San Francisco $206,850
Brielle Williamson Integration Specialist New York $372,000

My full code is now (datatable inside datatable)

$(document).ready( function () {
    var table = $('#myTable').DataTable({
     "ajax": {
         "url": "http://webservice/ajax.php",
         "method": "POST",
         "data": ""
     },
     "columns": [
        {
    "className":      'details-control',
         "orderable":      false,
    "data":           null,
    "defaultContent": ''
       },
       {"data": "Column1"},
       {"data": "Column2"},
       {"data": "Column3"},
       {"data": "Column4"},
       {"data": "Column5"}
     ],
     "order": [[5,'desc']],
     }]
   });
 
   $('#myTable tbody').on('click', 'td.details-control', function(){
     var tr = $(this).closest('tr');
     var row = table.row( tr );    
 
     if ( row.child.isShown() ){
       row.child.hide(); 
       tr.removeClass('shown'); 
     }
     else{
       row.child( format(row.data()) ).show;
       tr.addClass('shown'); isShown
     }
   });
 
} );

function format ( rowData ) {
  var fila = $('<div/>')
    .addClass( 'loading' )
    .text( ' Cargando ... ' );

  var child_data = "";
  $.ajax( {
    url: 'http://http://webservice/ajax.php',
    data: {
      exp: rowData["Column2"]
    },
    dataType: 'json',
    type: 'post',
    success: function ( json ) {
      child_data = json;
    }
  });

  var tab = fila.dataTable({
    data : child_data,
    "columns": [
      {"data": "Column1"},
      {"data": "Column2"},
      {"data": "Column3"},
      {"data": "Column4"},
      {"data": "Column5"}
    ],
    "order": [[5,'desc']]
  });
  return fila;
}

But shows an error on var fila = $('<div/>') because div not found

DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2

Similar with fila = $('</tr>') (the close tr of parent row)

Tried to include the ajax call inside the datatable also,

function format ( rowData ) {
  var fila = $('<div/>')
    .addClass( 'loading' )
    .text( ' Cargando ... ' );

  var tab = fila.dataTable({
    "ajax": {
        "url": "http://http://webservice/ajax.php",
        "method": "POST",
        "data": " exp: rowData['Column2']"
    },
    "sAjaxDataProp": "",
    "columns": [
      {"data": "Column1"},
      {"data": "Column2"},
      {"data": "Column3"},
      {"data": "Column4"},
      {"data": "Column5"}
    ],
    "order": [[5,'desc']]
  });
  return fila;
}

But neither worked

I know I'm close to get it work, but don't know what's is failing

kthorngren

You don't want to initialize a new table in your format function. You need to build and return the HTML table structure you want to display. Similar to the format function in this example:
https://datatables.net/examples/api/row_details.html

Kevin

EMORRAS

I'll try that, but still will have the problem that the first line stops execution because

isn't found (nor </tr>, <tr/>, </div>).

var fila = $('<div/>')
    .addClass( 'loading' )
    .text( ' Cargando ... ' );

Thanks

EMORRAS

after because, I wrote up <d i v / > (added spaces now to force it be written)