Add a button to show additional data in data tables - arrays

Question

i am not much familiar with Data Tables but by following the examples provide i manged to load the data set to my table via an json. now my problem is i have some additional data to show when a button in a row clicked.lets say i view club details when i click on show members button which is in each raw i need to show members details from the json file.How can i achieve this.Sorry if i am repeating a question but couldn't find one here.if you can provide me certain resources which address a slimier problem i'll appreciate. Thanks!
my json seems like.
{
"data": [
{
"club": [
"xxxxx",
"xxxxx"
],
"members":[{"a":{"fname":"AAA","lname":"BBB"},"b":{"fname":"AAA","lname":"BBB"},"c":{"fname":"AAA","lname":"BBB"}}],
"address": [
"xxxx",
"xxxxx",
"xxxxxx"
],
"district": "xxxxx",
"established": "xxxx"
},
{
"club": [
"xxxxx",
"xxxxx"
],
"members":[{"a":{"fname":"AAA","lname":"BBB"},"b":{"fname":"AAA","lname":"BBB"},"c":{"fname":"AAA","lname":"BBB"}}],
"address": [
"xxxx",
"xxxxx",
"xxxxxx"
],
"district": "xxxxx",
"established": "xxxx"
}
]}
my script to load data as follows.
<script>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "spellData.json",
"columns": [
{ "data": "club[, ]" },
{ "data": "address.0" },
{ "data": "members[, ]" },
{ "data": "district" },
{ "data": "established" },
{ "data": "address.2" },
{ "data": "address.1" }
]
} );
} );
</script>
my table is as follows.
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Club Name</th>
<th>Area</th>
<th>Members</th>
<th>District</th>
<th>Estb.</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Club Name</th>
<th>Area</th>
<th>Members</th>
<th>District</th>
<th>Estb.</th>
<th>Address</th>
<th>Town</th>
</tr>
</tfoot>
</table>
here if i can use a dialog to load member data its easy because i may need to add some columns too.How i can achieve something like this?HEre is a jsfiddle if you need..

Answer 1

You were nearly there but the alert was due to reinitialising the child DataTable. If you initialise it on page load and then interact with it when the button is clicked it's much better as you'll then not have to check to see if it's been initialised already:
var e = $('#sub_table').DataTable({
"columns": [{
"data": "fname",
"title": "First Name"
}, {
"data": "lname",
"title": "Last Name"
}]
});
Then, when your button is clicked you can clear the table, add the rows (might be better to have members being an array here, then you could add them all in one go using rows.add() which accepts an array rather than an object) and finally draw it again. As things stand this works:
$('table.table').on('click', '.mybutton', function() {
e.clear();
$.each(example.row($(this).parents('tr')).data().members, function(k, v) {
e.row.add(v);
});
e.draw();
});
Working JSFiddle, hope that helps.