DataTable with 2 TR not showing pagination, search, sorting

niteshapte

I am using DataTable and accordian collapse to display data in a table and upon click of 'Click to View' in first tr, the div in second tr expands to display data. Around 25 records are being fetched from DB. Now issue being faced is that pagination, sorting, show [10] entries, search box not showing up at all and all data are being displayed at once. What changes to I need to do make it work as usual? Below is the structure with 2 tr.

<table class="table table-bordered table-condensed dataTable" id="odata">
<thead>
    <tr>
        <th>#</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
        <th>G</th>
        <th>H</th>
        <th>View</th>
    </tr>
</thead>
<tbody >
<!------------ Inside For Loop - Start -------------------->
    <tr id="1">
        <td>1.</td>
        <td>A from DB</td>
        <td>B from DB</td>
        <td>C from DB</td>
        <td>D from DB</td>
        <td>E from DB</td>
        <td>F from DB</td>
        <td>G from DB</td>
        <td>H from DB</td>
        <td class="accordion-toggle" data-toggle="collapse" data-target="demo_x">Click to View</td> <!------------ x changes with for loop index ----------->
    </tr>
    <tr>
        <td colspan="12" class="hiddenRow" style="border-top: 0;"><div id="demo_x" class="accordian-body collapse"> <!------------ x changes with for loop index ----------->
            <div class="invoice p-3 mb-0">
            <div class="row">
            <div class="col-12">
            </div>
            <!-- /.col -->
            </div>
            <!--------- Some content from DB ------->
            </div>
        </td>
    </tr>
<!------------ Inside For Loop - End -------------------->
</tbody>
</table>

JavaScript:
$('#odata').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true
});

kthorngren

Datatables doesn't support rowspan or colspan with the tbody. See the HTML Requiremens for more information.

Kevin

niteshapte

@kthorngren Here rowspan and colspan is irrelevant and that's not at all causing the issue. I want to make datatable work with 2 tr, or let's say parent and child tr.

kthorngren

Do you mean something like this example?
https://datatables.net/examples/api/row_details.html

Kevin

niteshapte

@kthorngren Yes, like that. But I am using collapse. This is something I want to achieve. The one in image is for 1 row. But I have to get it done for multiple rows and it doesn't work with multiple rows.

kthorngren

Yes, like that. But I am using collapse

Not sure what you mean by "using collapse". Please explain further.

But I have to get it done for multiple rows and it doesn't work with multiple rows.

Its hard to say what the problem might be without seeing the code running. Please provide a link to your page or a test case replicating the issue so we can help debug.

The Child Detail Rows uses the format() function to build the HTML for the child rows. This is where you will generate the desired HTML with multiple rows.

Kevin