DataTables putting tables inside of a datatable

Question

I need to put tables in my datatable, but it doesn't look like datatables likes it. Does anyone know how I can get the functionality I need? I tried putting in divs that look like tables instead of tables, but it still broke. I think because the tr only has one td.

My code:

foreach($campaigns as $campaign):?>
<tr>
    <td><?php echo $campaign['name']?></td>
    <td><?php echo date('m/d/Y', strtotime($campaign['created_date']))?></td>
    <td><?php echo $campaign['country_id']?></td>
    <td><?php echo $campaign['domain_getter_type']?></td>
    <td><?php echo $campaign['domain_metrics']?> <?php echo $campaign['metric_filter_setting_id']?></td>
    <td><?php echo $campaign['domain_contact']?></td>
    <td>0</td>
</tr>
<!--campaign runs-->
<tr>
    <td colspan="99">
        <table>
            <thead>
                <tr>
                    <th>dfad</th>
                    <th>t3wtaw3 On</th>
                    <th>dfw</th>
                    <th>Domain dawfd</th>
                    <th>p3p3</th>
                </tr>
            </thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
    </td>
</tr>
<?php endforeach;?>

After each row of data, I want to put a hidden table you can show or hide, that holds additional information about each specific run of that campaign.

I get this error in chrome: Uncaught TypeError: Cannot read property 'className' of undefined

Well that looks like a javascript error but there's no javascript in your code. You need to post more for us to be able to help you. — Cfreak, Apr 27 '12 at 16:56
Its cause by datatables.js line 27. And I think it's because my TR only has one TD, but idk what I can do about that — Farzher, Apr 27 '12 at 17:00
Why are you using Colspan="99" when you have only one column? — Ann L., Apr 27 '12 at 17:06

score 5 · Accepted Answer · answered Apr 27 '12 at 17:58

Assuming this question is referring to the jQuery DataTables JavaScript plugin (assuming because I see no mention of JS in the example code provided), I would follow the author's example that he outlines in his blog here: http://datatables.net/blog/Drill-down_rows

I have used this method before and it works quite well.

It does assume that you are initializing the table as empty when it renders and then fetches the data with AJAX, but I see no reason it could not be easily modified to be generated server side.

Another option would be using the master / detail example as a guide, you can find that here along with the sample code: http://datatables.net/examples/api/row_details.html

DataTables putting tables inside of a datatable

1 Answers1