complex header in datatables.net

Question

I'm using table plugin of datatables.net. I'm having the problem with complex header columns and have the following error when using it.

Uncaught TypeError: Cannot call method 'fnSetData' of undefined at jquery.dataTables.js line 820

this html code (actually this is a template)

    <!-- BEGIN:main -->
<table id='myTable' style='width: 100%'>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">Contract Details</th>
            <th colspan="4">Delivery</th>
            <th rowspan="2">Basis Terminal Month</th>
            <th colspan="5">Fixed</th>
            <th colspan="4">Unfixed</th>
            <th colspan="3">Trigger</th>
            <th colspan="2">Payment</th>
            <th colspan="2" rowspan="2"></th>
        </tr>
        <tr>
            <th>Contract Ref</th>
            <th>Supplier/Buyer</th>
            <th>Grade</th>
            <th>Days Pending</th>
            <th>Tons</th>
            <th>Delivered</th>
            <th>Balance</th>
            <th>Status</th>
            <th>Tons</th>
            <th>Contract Price</th>
            <th>Contract FOB Price</th>
            <th>Mark To Market Price</th>
            <th>Outright Exposure FOB</th>
            <th>Tons</th>
            <th>Contract FOB Diff</th>
            <th>Mark To Market FOB Diff</th>
            <th>Differential Exposure FOB</th>
            <th>Strike Price</th>
            <th>Variance</th>
            <th>Days</th>
            <th>Due Date</th>
            <th>Days Late</th>
        </tr>
    </thead>
    <tbody>
        <!-- BEGIN:row -->
        <tr id="row_{id}">
            <td>{count}</td>
            <td>{ref_number}</td>
            <td>{supplier}</td>
            <td>{grade}</td>
            <td class="formatNumber alignRight">{pending_day}</td>
            <td class="formatNumber alignRight">{contract_tons}</td>
            <td  class="formatNumber alignRight">{delivered_tons}</td>
            <td  class="formatNumber alignRight">{pending_tons}</td>
            <td><input type="checkbox" id="rd_{id1}" value="{delivery_status}" {checked}/></td>
            <td class="alignCenter">{terminal_month}</td>
            <td  class="formatNumber alignRight">{fixed_tons}</td>
            <td  class="formatNumber alignRight">{contract_price}</td>
            <td  class="formatNumber alignRight">{contract_fob_price}</td>
            <td  class="formatNumber alignRight">{market_price}</td>
            <td  class="formatNumber alignRight">{outright_fob}</td>
            <td  class="formatNumber alignRight">{unfixed_tons}</td>
            <td  class="formatNumber alignRight">{contract_fob_diff}</td>
            <td  class="formatNumber alignRight">{market_fob_diff}</td>
            <td  class="formatNumber alignRight">{differential_fob}</td>
            <td  class="formatNumber alignRight">{strike_price}</td>
            <td  class="formatNumber alignRight">{variance}</td>
            <td  class="formatNumber alignRight">{trigger_days}</td>
            <td>{payment_due_date}</td>
            <td  class="formatNumber alignRight">{payment_days_late}</td>
            <td><input type="button" value="Detail" onclick="ContractDetail('{id2}')"/></td>
            <td><input type="button" value="Traffic" onclick="trafficMovement('{id3}')"/></td>
        </tr>
        <!-- END:row -->
    </tbody>
</table>
<input type="hidden" id="action" name="action" value=""/>
<input type="hidden" id="contract_id" name="contract_id" value=""/>
<!-- END:main -->

and this is the javascript where I call datatable

$(document).ready(function() {
    $("#myTable").dataTable();
});

I don't know what is the problem, I saw in datatables.net they say that it supports complex header column by call datatable(). I think my problem is from the html code.

MarquisDeMizzle · Accepted Answer · 2013-05-08 19:12:51Z

2

The issue is in the header for the last two columns that you add for your buttons. You're declaring it as both rowspan="2" and colspan="2" and DataTables is interpreting it as a single column.

Simply change the

<th colspan="2" rowspan="2"></th>

to be:

<th rowspan="2"></th>
<th rowspan="2"></th>

And you will be good to go.

answered May 8, 2013 at 19:12

MarquisDeMizzle

5149 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robin Whittleton Over a year ago

Had this problem as well, eliminating the colspan attributes fixed it.

Collectives™ on Stack Overflow

complex header in datatables.net

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related