Question

我知道这可能很简单，但我是jQuery的新手，我发现的示例修复不符合我们正在使用的语法。

这是我的代码：

<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>

这是在模态窗口中调用的。如果我与UI中的表进行交互，它的大小正确。我很确定这是使用“fnAdjustColumnSizing”属性的问题，但我无法让它工作。任何帮助表示赞赏。

Answer 1

尝试使用fnAdjustColumnSizing这样的

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

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

http://jsfiddle.net/Lgf2cmLh/

JQuery数据表头不扩展

1 个答案: