Child rows (show extra / detailed information)
Child rows (show extra / detailed information)
JimBobUKII
Posts: 13Questions: 1Answers: 0
I am trying to reproduce the following but having no luck!
https://datatables.net/examples/api/row_details.html
My data is stored in a json file and looks like the following (shortened for demo)
{
"data": [
{
"first": "Jason",
"last": "Stone",
"age": 38,
"sex": "male",
"dept": "Finance",
"service": 28
},
{
"first": "Lewis",
"last": "Dome",
"age": 64,
"sex": "male",
"dept": "Stores",
"service": 3
},
{
"first": "Andrew",
"last": "Chung",
"age": 74,
"sex": "male",
"dept": "SMT",
"service": 39
}
]
}
The table is
<table id="example2" class="table table-hover table-striped table-bordered w-100" style="width:100% !important">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>*</th>
<th>Age</th>
<th>*</th>
</tr>
</thead>
</table>
So, the 3rd col would be extra details which shows 'sex', the 5th col would show 'dept' and 'service'
I cannot for the life of me reproduce, could someone help me please?
Thanks
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Replies
Happy to take a look at a test case of what you've got so far.
I don't quite understand that I'm afraid. Do you mean the
sex,deptandserviceproperties would all be shown in the child row? So the parent row in this case only has three columns?Allan
@Alan
Sorry about formatting etc!
3rd col would have '+'. When selected would show
data.sexprops.5th col would have '+'. When selected would show
data.deptanddata.servicepropsI dont have anything I can show as I am working remotely using local browser/server/json
What you are looking for is certainly possible - you'll notice in my example you linked to in your top post I used:
to trigger the open / close action. You'd do the same thing, but use a different class for column 3 and 5 so you can tell the difference between them - e.g. you might use:
Allan
@allan
Thank you! I am still confused! I am quite new to this!!!!
Is there a YouTube video or a good step by step I could look at/watch?
For something as specific as this? No, I’m afraid not.
The example you linked to in your original post is the best place to start. Perhaps you could post a link to the page / code you’ve tried so far so we can help?
Allan
@allan its a little late but thank you for your help. I have been able to produce exactly what I needed!