I want to dynamically add child rows below each parent rows in HTML table. This link shows how to do it by adding hide/show option:- https://datatables.net/examples/api/row_details.html, but I want to avoid that and display child rows without having to click show/hide option. Also the data are dynamically loaded from ajax call. I parse the JSON response from ajax call and append in HTML table using JavaScript and DataTable in following way:-
function displayFruits() {
$.ajax({
type: "GET",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
dataType: "json",
url: "http://www.dummyexample.com",
success: function(data) {
tr = $('<tr/>');
tr.append("<td>" + data[i].name + "</td>");
tr.append("<td>" + data[i].type + "</td>");
tr.append("<td>" + data[i].cost + "</td>");
tr.append("<td>" + data[i].season + "</td>");
tr.append("<td>" + data[i].vitaminContent + "</td>");
$('#tableId').append(tr);
}
$('#tableId').DataTable();
},
error: function(xhr, ajaxOptions, thrownError) {
// handle your fail response here
}); //end of ajax
} // end of displayFruits() function
In above example, instead of displaying season and vitaminContent in separate column, I want to display them as child row below parent row. How can I achieve that?
