Issue setting a td id/name in DataTables 1.10.x

Question

This relates to datatables 1.10.x.

I'm using this reference to create child rows, and it's easy to put HTML inside of the javascript code that's genereated, like this:

function format ( d ) {
    return '<div class="slider">'+ 
    '<table id="expandInput" cellpadding="5" cellspacing="0" border="0" style="margin: 0 auto;">'+                
        '<tr>'+
            '<td class="dropHeader">Cost</td>'+
            '<td class="dropInfo"><input required type="text" id="cost" name="cost" value="'+d.cost+'"></input></td>'+                
        '</tr>'+                       
    '</table>'+
   '</div>'; 
}

But this only affects the child child that's generated on-click. I have no idea how to create an id or name using the standard datatables syntax for the cells that datatables itself generates. The only example i was able to find on datatables' website relates to creating an id using server side

var table = $('#ltc-table').DataTable( {    
    "data" : json,        
    "columns" : [
      { data : 'cost' },
      { data : 'resale' }
  ],
  "columnDefs": [
  { className: "details-control", "targets": [ 0 ] }
  ]
});

I know I can set a class of a td using columnDefs, as demonstrated here, but I can't figure out how to add additional criteria, and I need to set a unique id and name for each td that's genereated.

Answer 1

You need to use createdRow property to define callback for whenever a TR element is created for the table's body.

$('#example').dataTable( {
   "createdRow": function ( row, data, index ) {
      $('td', row).eq(1).attr('id', 'td-' + index + '-1');
   }
});

Code $('td', row).eq(1) is used to select second cell in the table row using zero-based index (1 for second cell). Code attr('id', 'td-' + index + '-1') will set that cell id attribute to td-0-1 for first row, td-1-1 for second row, etc., where index is zero-based row index.

See this JSFiddle or Row created callback example for demonstration.