How to dynamically custom render child row on click of the control buttom in responsive table?

debarshi

Dynamically custom render child row on click of the control buttom in responsive table.

I want to write the html for the child row (column) dynamically when the control button is clicked (need to make a ajax call to get the content for that particular row), as we are doing it in the link below while initializing the table.

https://datatables.net/extensions/responsive/examples/child-rows/custom-renderer.html.

Code I am using for now is below.

var myTable = $("#myTable").DataTable({
    "bJQueryUI": true,
    "bProcessing": true,
    "sPaginationType": "full_numbers",
    "sDom":'<"top"<ilp><"clear">>rt<"bottom"<ilp><"clear">>',
    responsive: {details: {type: 'column',target: -1}},
    "bSort" : false,
    "autoWidth": false,
    columnDefs:[{className: 'control',orderable: false, targets: -1,"data": null,"defaultContent": " "}],
    "columns": [{"width":"70%"},{"width":"20%"},null,null]
});
myTable.rows.add(tableData).draw();//tableData - is table content in json format.

 $("myTable tbody").on('click', 'td.control', function () {
  var rowIdx = myTable.cell( this ).index().row;
  myTable.row(rowIdx).data()[2]='Hello DataTable'; // I want to put custom html here
  myTable.row(rowIdx).invalidate().draw();
 });

Any suggestion will be helpful.