jquery DataTables - 在选择过滤器之前未排列的列过滤器

Question

我正在尝试解决以下问题。我使用jQuery DataTables进行水平滚动和列下拉过滤，出于某种原因，我的表格没有排列，直到我选择要过滤的列，然后它完美排列。有没有办法让这个立即，即页面加载时？谢谢你的帮助！

我的JS：

@section Scripts{
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.12/datatables.min.js"></script>
<script>
    $(document)
        .ready(function() {
            $('#callableIncome_table')
                .DataTable({
                    scrollX: true,
                    initComplete: function() {
                        var api = this.api();

                        api.columns()
                            .indexes()
                            .flatten()
                            .each(function(i) {
                                var column = api.column(i);
                                var select = $('<select><option value=""></option></select>')
                                    .appendTo($(column.footer()).empty())
                                    .on('change',
                                        function() {
                                            var val = $.fn.dataTable.util.escapeRegex(
                                                $(this).val()
                                            );

                                            column
                                                .search(val ? '^' + val + '$' : '', true, false)
                                                .draw();
                                        });

                                column.data()
                                    .unique()
                                    .sort()
                                    .each(function(d, j) {
                                        select.append('<option value="' + d + '">' + d + '</option>');
                                    });
                            });
                    }
                });
        });
</script>

} @section Styles {           }

我的HTML：

<div class="container" style="margin-top: 2%" >
<table id="callableIncome_table" class="table table-striped table-bordered" style="white-space: nowrap">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Underlyer)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PayoutCurrency)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AutoCallLevel)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Barrier)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CouponBarrier)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AutoCallablePattern)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Frequency)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Term)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Fee)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.UpsideParticipation)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Coupon)
            </th>
            <th>
                @Html.DisplayNameFor(model =>model.AsOfDate)
            </th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Underlyer)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PayoutCurrency)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AutoCallLevel)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Barrier)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CouponBarrier)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AutoCallablePattern)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Frequency)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Term)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Fee)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.UpsideParticipation)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Coupon)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AsOfDate)
            </th>
        </tr>
    </tfoot>
    <tbody>
        @foreach (CallableIncomeViewModel callableIncomeVM in Model)
{
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.Underlyer)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.PayoutCurrency)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.AutoCallLevel)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.Barrier)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.CouponBarrier)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.AutoCallablePattern)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.Frequency)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.Term)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.Fee)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.UpsideParticipation)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => callableIncomeVM.Coupon)
                </td>
                <td>
                    @Html.DisplayFor(modelItem =>callableIncomeVM.AsOfDate)
                </td>
            </tr>
}
    </tbody>
</table>

我的CSS：

@section Styles{
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.12/datatables.min.css" />}

正如您所看到的，表格中没有太多配置。我刚刚关注了DataTables网站上的演练。

点击过滤器之前：

Before (problem)

点击过滤器后：

After (no problem)

非常感谢你的帮助！