Child rows (show extra / detailed information)

Child rows (show extra / detailed information)

JimBobUKIIJimBobUKII Posts: 11Questions: 0Answers: 0
edited April 14 in DataTables

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.

Replies

  • allanallan Posts: 54,880Questions: 1Answers: 8,601 Site admin

    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

  • JimBobUKIIJimBobUKII Posts: 11Questions: 0Answers: 0

    @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

  • allanallan Posts: 54,880Questions: 1Answers: 8,601 Site admin

    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

  • JimBobUKIIJimBobUKII Posts: 11Questions: 0Answers: 0

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

  • allanallan Posts: 54,880Questions: 1Answers: 8,601 Site admin

    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

  • JimBobUKIIJimBobUKII Posts: 11Questions: 0Answers: 0

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

Sign In or Register to comment.