JQuery datatable headers not expanding

Question

I know this is probably simple but I'm new to jQuery and the example fixes I've found don't line up with the syntax we're using.

Here's my code:

<div class="row">
    <div class="col-lg-12">
        <div class="table-header">Commission Detail&nbsp; &nbsp;</div>
                <table class="table table-striped table-bordered table-hover dataTable" id="commissionDetailTable">
                    <thead>
                    <tr>
                        <th>Coverage</th>
                        <th>Transaction Date</th>
                        <th>Premium</th>
                        <th>Commission Rate</th>
                        <th>Commission Amount</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach (var item in Model.CommissionDetails)
                    {
                        <!--Important - In order for dataTable to work body cannot have any colspan items, and must match the header exactly-->
                        <tr>
                            <td>@item.Coverage</td>
                            <td>@item.TransactionDate.ToShortDate()</td>
                            <td>@item.Premium</td>
                            <td>@item.CommissionRate</td>
                            <td>@item.CommissionAmount</td>
                        </tr>
                    }
                    </tbody>

                    <tfoot>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tfoot>
                </table>
    </div>
</div>

<script>
$(document).ready(function () {
    var table = $('table#commissionDetailTable').dataTable({
        dom: 'frtB',
        scrollY: '50vh',
        bAutoWidth: false,
        scrollX: false,
        paging: false,
        buttons: [
            {
                title: 'Commission Detail Export',
                extend: 'csv',
                className: 'btn btn-success',
                text: 'Export to Excel'
            }
        ]
    });
    $(window).on('resize', function () {
        table.fnAdjustColumnSizing();
    });
});
</script>

This is being called in a modal window. If i interact with the table in the UI at all, it sizes correctly. I'm pretty sure it's a matter of using the "fnAdjustColumnSizing" property but I can't get it to work. Any help is appreciated.

Answer 1

Try using fnAdjustColumnSizing like this

var table = $('table#commissionDetailTable').dataTable(/*...your options...*/);

$(window).on('resize', function () {
    table.fnAdjustColumnSizing();
});

http://jsfiddle.net/Lgf2cmLh/