Collapsible/Expanding rows passing row-contents onclick
Collapsible/Expanding rows passing row-contents onclick
tomzn
Posts: 29Questions: 9Answers: 2
Hi All,
I am trying to implement a datatable with expandible and collapsible rows similar to the code here :
```https://datatables.net/examples/api/row_details.html
I have gotten the code to expand and collapse the rows working but I'm experiencing difficulty in passing the values of the expanded row to my function when the details.control icon is clicked. eg. Upon clicking the expand icon(details-control) I'm trying to expand the row and populate it with data obtained via an ajax request dependent on some of the parent rows data. So some of the parent rows data needs to be passed to my ajax call. How do I obtain said rows data. My code is as follows below :
$('#myTable').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = oTable.row(tr);
// need to get row data here somehow
var rowId = ?????
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
format(row.child,rowid);
tr.addClass('shown');
}
});
function format(callback, id) {
$.ajax({
url: "@Url.Action("foo", "bar")/"+ id,
dataType: "json",
complete: function (response) {
var data = JSON.parse(response.responseText);
var thead = '', tbody = '';
for (var key in data[0]) {
//thead += '<th>' + key + '</th>';
}
$.each(data, function (i, d) {
for (var x = 0; x < d.length ; x++)
{
tbody += '<tr><td style="width:290px">' + d[x].Description + '</td><td style="width:210px">' + d[x].BalanceBroughtForward + '</td><td style="width:100px">' + d[x].Payments + '</td><td style="width:100px">' +
'</td></tr>';
}
});
callback($('<table>' + thead + tbody + '</table>')).show();
},
error: function () {
$('#output').html('Bummer: there was an error!');
}
});
This discussion has been closed.
Replies
After reading through the datatables api documentation and by trial and error I managed to get this working by using the following :
Any better, more elegant solutions are welcome. Cheers.
row().data()would be the way to get the row data.Good to hear you got it working.
Allan