DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Add new row with Child row

Add new row with Child row

ericlatericlat Posts: 14Questions: 2Answers: 0
edited September 2014 in Free community support

I am trying to add a new row that has a child row attached. Here is a link to an example:

http://live.datatables.net/foluzika/11/

When you click on the expand column you can see in the console that the 'format' function returns the markup for the child row; however the row is not expanding. Am I going down the wrong path adding the details and trigger binding in the column def?

This question has an accepted answers - jump to answer

Answers

  • ericlatericlat Posts: 14Questions: 2Answers: 0

    actually this seems to work if I add more than one row, but not a single row?

  • ericlatericlat Posts: 14Questions: 2Answers: 0

    I believe i may have found the solution. If there is a more correct way to do this please advise. http://live.datatables.net/foluzika/12/

  • MuhaheMuhahe Posts: 25Questions: 8Answers: 2
    edited September 2014 Answer ✓

    i think i see your problem. But unfortunately i gotta go so look here

    "createdRow": function (row,data,index){
            if(data.child != null){
                var td = $('td', row).eq(0)
                td.addClass('details-control')
                try{                     
                        subtablesId.push('p'+data.id)                   
                        var tr = td.closest('tr');                   
                        var nRow = this.api().row( tr );
                        var elem = format(nRow.data())
                        var table = initializeSubTable(elem,allTasksData['p'+data.id])
                        if (showHideItems['p'+data.id] ==true){
                            nRow.child(table).show();
                            tr.addClass('shown');
                        }else{
                            nRow.child(table)
                        }
                  
                }catch(err){
                    console.log(err)
                    //for IE 
                }
            }
        },

    where im getting nRow for child manipulation.

    and here is event for show/hide via click

     projectsTable.on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = projectsTable.row( tr );
        
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
            delete showHideItems['p'+row.data().id]
            
        }
        else {
            // Open this row
                  
            row.child.show();
            tr.addClass('shown');
            showHideItems['p'+row.data().id] = true
            
        }
      
    } );
  • ericlatericlat Posts: 14Questions: 2Answers: 0

    Thank you for your help. That did it.

  • ericlatericlat Posts: 14Questions: 2Answers: 0

    Thank you very much for your help. With this I was able to create this final solution:

    var dataSet = [
    [null,'Internet Explorer 4.0','Win 95+','4','X'],
    [null,'AOL browser (AOL desktop)','Win XP','6','A'],
    [null,'Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
    [null,'Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
    [null,'Camino 1.0','OSX.2+','1.8','A'],
    [null,'Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
    [null,'Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A']
];

var format = function( d ) {
  console.log(d);
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>' +
    '<td>Office:</td>'+
    '<td>' + d[3] + '</td>'+
    '</tr>'+
    '<tr>' +
    '<td>Salary:</td>'+
    '<td>' + d[4] + '</td>'+
    '</tr>'+
    '<tr>' +
    '<td>Extra info:</td>'+
    '<td>And any further details here (images etc)...</td>'+
    '</tr>'+
    '</table>';
};

$(document).ready( function () {
  var table = $('#example').DataTable({  
    "data": dataSet,
    "createdRow":function(row, data, index){
      if(data.child != null){
        var td = $('td', row).eq(0);
        td.addClass('details-control');
        try{                    
          subtablesId.push('p'+data.id);                  
          var tr = td.closest('tr');                  
          var nRow = this.api().row( tr );
          var elem = format(nRow.data());
          var table = initializeSubTable(elem,allTasksData['p'+data.id]);
          if (showHideItems['p'+data.id] ===true){
            nRow.child(table).show();
            tr.addClass('shown');
          }else{
            nRow.child(table);
          }

        }catch(err){
          console.log(err);
          //for IE
        }
      } 
    },
    "columns": [
      {
        "class": 'details-control',
        "orderable": false,
        "data": null,
        "defaultContent": ''
      },
      { "name": "name" },
      { "name": "position" },
      { "name": "office" },
      { "name": "salary" }
    ],
    "columnDefs": [
      { "visible": false, "targets": [3,4] }
    ]
  });
  
  table.on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    }
    else {
      // Open this row
      row.child( format(row.data()) ).show();
      tr.addClass('shown');

      //debug
      console.log(format(row.data()));
    }
  } );
 
  $('#addRow').on( 'click', function () {
    table.row.add( [
      null,
      'Eric',
      'Developer',
      'MyOffice',
      '$1,000,000,000'
    ] ).draw();
  });
});
  • ericlatericlat Posts: 14Questions: 2Answers: 0 
    var dataSet = [
    [null,'Internet Explorer 4.0','Win 95+','4','X'],
    [null,'AOL browser (AOL desktop)','Win XP','6','A'],
    [null,'Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
    [null,'Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
    [null,'Camino 1.0','OSX.2+','1.8','A'],
    [null,'Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
    [null,'Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A']
];

var format = function( d ) {
  console.log(d);
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>' +
    '<td>Office:</td>'+
    '<td>' + d[3] + '</td>'+
    '</tr>'+
    '<tr>' +
    '<td>Salary:</td>'+
    '<td>' + d[4] + '</td>'+
    '</tr>'+
    '<tr>' +
    '<td>Extra info:</td>'+
    '<td>And any further details here (images etc)...</td>'+
    '</tr>'+
    '</table>';
};

$(document).ready( function () {
  var table = $('#example').DataTable({  
    "data": dataSet,
    "createdRow":function(row, data, index){
      if(data.child != null){
        var td = $('td', row).eq(0);
        td.addClass('details-control');
        try{                    
          subtablesId.push('p'+data.id);                  
          var tr = td.closest('tr');                  
          var nRow = this.api().row( tr );
          var elem = format(nRow.data());
          var table = initializeSubTable(elem,allTasksData['p'+data.id]);
          if (showHideItems['p'+data.id] ===true){
            nRow.child(table).show();
            tr.addClass('shown');
          }else{
            nRow.child(table);
          }

        }catch(err){
          console.log(err);
          //for IE
        }
      } 
    },
    "columns": [
      {
        "class": 'details-control',
        "orderable": false,
        "data": null,
        "defaultContent": ''
      },
      { "name": "name" },
      { "name": "position" },
      { "name": "office" },
      { "name": "salary" }
    ],
    "columnDefs": [
      { "visible": false, "targets": [3,4] }
    ]
  });
  
  table.on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    }
    else {
      // Open this row
      row.child( format(row.data()) ).show();
      tr.addClass('shown');

      //debug
      console.log(format(row.data()));
    }
  } );
 
  $('#addRow').on( 'click', function () {
    table.row.add( [
      null,
      'Eric',
      'Developer',
      'MyOffice',
      '$1,000,000,000'
    ] ).draw();
  });
});
  • ericlatericlat Posts: 14Questions: 2Answers: 0 
    var dataSet = [
    [null,'Internet Explorer 4.0','Win 95+','4','X'],
    [null,'AOL browser (AOL desktop)','Win XP','6','A'],
    [null,'Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
    [null,'Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
    [null,'Camino 1.0','OSX.2+','1.8','A'],
    [null,'Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
    [null,'Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A']
];

var format = function( d ) {
  console.log(d);
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>' +
    '<td>Office:</td>'+
    '<td>' + d[3] + '</td>'+
    '</tr>'+
    '<tr>' +
    '<td>Salary:</td>'+
    '<td>' + d[4] + '</td>'+
    '</tr>'+
    '<tr>' +
    '<td>Extra info:</td>'+
    '<td>And any further details here (images etc)...</td>'+
    '</tr>'+
    '</table>';
};

$(document).ready( function () {
  var table = $('#example').DataTable({  
    "data": dataSet,
    "createdRow":function(row, data, index){
      if(data.child != null){
        var td = $('td', row).eq(0);
        td.addClass('details-control');
        try{                    
          subtablesId.push('p'+data.id);                  
          var tr = td.closest('tr');                  
          var nRow = this.api().row( tr );
          var elem = format(nRow.data());
          var table = initializeSubTable(elem,allTasksData['p'+data.id]);
          if (showHideItems['p'+data.id] ===true){
            nRow.child(table).show();
            tr.addClass('shown');
          }else{
            nRow.child(table);
          }

        }catch(err){
          console.log(err);
          //for IE
        }
      } 
    },
    "columns": [
      {
        "class": 'details-control',
        "orderable": false,
        "data": null,
        "defaultContent": ''
      },
      { "name": "name" },
      { "name": "position" },
      { "name": "office" },
      { "name": "salary" }
    ],
    "columnDefs": [
      { "visible": false, "targets": [3,4] }
    ]
  });
  
  table.on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    }
    else {
      // Open this row
      row.child( format(row.data()) ).show();
      tr.addClass('shown');

      //debug
      console.log(format(row.data()));
    }
  } );
 
  $('#addRow').on( 'click', function () {
    table.row.add( [
      null,
      'Eric',
      'Developer',
      'MyOffice',
      '$1,000,000,000'
    ] ).draw();
  });
});
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.