Child rows (show extra / detailed information)

JimBobUKII

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.

allan

Happy to take a look at a test case of what you've got so far.

So, the 3rd col would be extra details which shows 'sex', the 5th col would show 'dept' and 'service'

I don't quite understand that I'm afraid. Do you mean the sex, dept and service properties would all be shown in the child row? So the parent row in this case only has three columns?

Allan

JimBobUKII

@Alan
Sorry about formatting etc!

3rd col would have '+'. When selected would show data.sex props.
5th col would have '+'. When selected would show data.dept and data.service props

I dont have anything I can show as I am working remotely using local browser/server/json

allan

What you are looking for is certainly possible - you'll notice in my example you linked to in your top post I used:

$('#example tbody').on('click', 'td.details-control', function () {

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:

$('#example tbody').on('click', 'td.details-sex', function () {
  ...
});
$('#example tbody').on('click', 'td.details-dept', function () {
  ...
});

Allan

JimBobUKII

@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?

allan

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

JimBobUKII

@allan its a little late but thank you for your help. I have been able to produce exactly what I needed!