Sort Nested table with main table

kashyaprashant

I have integrated data table in my code and have an accordion functionality on click of <tr>. So on click of <tr> another <tr> opens like an accordion.
I want the sorting option also works on the nested table <td>. Kindly help me to reach my output. sharing code below:

<table id="example" class="table display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Product</th>
            <th>Project/ Cluster</th>
            <th>Units</th>
            <th>Bedroom Type</th>
            <th>Bedrooms</th>
            <th>Areas(sft)</th>
            <th>Price</th>
            <th>SO</th>
            <th>Select</th>
        </tr>
    </thead>
    <tbody id="100">
        <tr>
            <td colspan="9">
                <table class="table innerTable">
                    <tbody>
                        <tr class="boxed" id=110 data-parent=100>
                            <td data-toggle="collapse" data-target="#accordion1" >AYKON CITY - TOWER B</td>
                            <td data-toggle="collapse" data-target="#accordion1" >AYKON CITY</td>
                            <td data-toggle="collapse" data-target="#accordion1" >AYKCB/23/2318</td>
                            <td data-toggle="collapse" data-target="#accordion1" >1 BR</td>
                            <td data-toggle="collapse" data-target="#accordion1" >01</td>
                            <td data-toggle="collapse" data-target="#accordion1" >671</td>
                            <td data-toggle="collapse" data-target="#accordion1" >AED 1,199,000.00</td>
                            <td><input type="checkbox" name="name1" />&nbsp;</td>
                            <td><input type="checkbox" name="name1" />&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td class="noDisplay"></td>
            <td class="noDisplay"></td>
            <td class="noDisplay"></td>
            <td class="noDisplay"></td>
            <td class="noDisplay"></td>
            <td class="noDisplay"></td>
            <td class="noDisplay"></td>
            <td class="noDisplay"></td>
        </tr>
</table>

kthorngren

The first problem is Datatables doesn't support colspan in the tbody. Are you looking for collapsable data similar to this example?
https://datatables.net/examples/api/row_details.html

The trick will be to figure out how to sort the child rows. If child row details is an option for you then maybe you can provide more details of how you want to sort the row details.

Kevin