Add new child rows

EMORRAS · November 2017

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 · November 2017

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 · November 2017

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

EMORRAS · November 2017

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 · November 2017

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 · November 2017

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 · November 2017

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 · November 2017

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 · November 2017

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

Add new child rows

Add new child rows

Answers

Howdy, Stranger!

Categories

DataTables

Add new child rows

Add new child rows

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables