Javascript jquery DataTables-列筛选器在选择筛选器之前不会对齐

我正在尝试解决以下问题。我使用jQueryDataTables进行水平滚动和列下拉筛选，出于某种原因，我的表在选择要筛选的列之前不会对齐，然后它就完美地对齐了。是否有任何方法可以立即执行此操作，即当页面加载时？谢谢你的帮助

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

@节脚本{
$（文件）
.ready（函数（）{
$（“#可赎回收入表”）
.数据表({
是的，
initComplete:function（）{
var api=this.api（）；
api.columns（）
.index（）
.flatte（）
.每项功能（i）{
var column=api.column（i）；
变量选择=$（“”）
.appendTo（$（column.footer（））.empty（））
.on（'变更'），
函数（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
});
column.data（）
.unique（）
.sort（）
.每个（功能（d，j）{
select.append（“”+d+“”）；
});
});
}
});
});

} @剖面样式{ }

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

@DisplayNameFor（model=>model.underlayer）
@DisplayNameFor（model=>model.PayoutCurrency）
@DisplayNameFor（model=>model.AutoCallLevel）
@DisplayNameFor（model=>model.Barrier）
@DisplayNameFor（model=>model.CouponBarrier）
@DisplayNameFor（model=>model.AutoCallablePattern）
@DisplayNameFor（model=>model.Frequency）
@DisplayNameFor（model=>model.Term）
@DisplayNameFor（model=>model.Fee）
@DisplayNameFor（model=>model.UpsideParticipation）
@DisplayNameFor（model=>model.优惠券）
@DisplayNameFor（model=>model.AsOfDate）
@DisplayNameFor（model=>model.underlayer）
@DisplayNameFor（model=>model.PayoutCurrency）
@DisplayNameFor（model=>model.AutoCallLevel）
@DisplayNameFor（model=>model.Barrier）
@DisplayNameFor（model=>model.CouponBarrier）
@DisplayNameFor（model=>model.AutoCallablePattern）
@DisplayNameFor（model=>model.Frequency）
@DisplayNameFor（model=>model.Term）
@DisplayNameFor（model=>model.Fee）
@DisplayNameFor（model=>model.UpsideParticipation）
@DisplayNameFor（model=>model.优惠券）
@DisplayNameFor（model=>model.AsOfDate）
@foreach（模型中的CallableIncomeViewModel callableIncomeVM）
{
@DisplayFor（modelItem=>callableIncomeVM.underlayer）
@DisplayFor（modelItem=>callableIncomeVM.PayoutCurrency）
@DisplayFor（modelItem=>callableIncomeVM.AutoCallLevel）
@DisplayFor（modelItem=>callableIncomeVM.Barrier）
@DisplayFor（modelItem=>callableIncomeVM.CouponBarrier）
@DisplayFor（modelItem=>callableIncomeVM.AutoCallablePattern）
@DisplayFor（modelItem=>callableIncomeVM.Frequency）
@DisplayFor（modelItem=>callableIncomeVM.Term）
@DisplayFor（modeleItem=>callableIncomeVM.Fee）
@DisplayFor（modelItem=>callableIncomeVM.UpsideParticipation）
@DisplayFor（modelItem=>callableIncomeVM.优惠券）
@DisplayFor（modelItem=>callableIncomeVM.AsOfDate）
}

我的CSS：

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

@节样式{
}

如您所见，表中没有太多配置。我只是在DataTables站点上进行了演练

单击过滤器之前：

单击过滤器后：

---

• [jquery]相关文章推荐

• 有没有一种方法可以使div在通过jquery draggable[或等等]拖动时不会相互重叠？ jquery
• 使用JQUERY每X秒对div进行一次排序 jquerysorting
• 如何向jQueryUIDatePicker实例添加其他事件处理程序？ jqueryjquery-uievents
• Jquery $.mobile.loadPage是否提供回调函数？ jqueryajaxjquery-mobile
• jquery.on不加载 jquery
• Jquery 当元素没有附加类时的事件处理程序 jquerywordpress
• jQuery$.ajax使用字符串数组调用Web Api jqueryasp.netajaxasp.net-mvc-4asp.net-web-api
• Jquery 元素为窗口大小的100% jquerywordpress
• 使用.on和.validate的jQuery必须提交两次表单才能进行验证 jquery
• Jquery 完成Ajax后调整帧大小 jqueryiframe
• Jquery 获取唯一li的文本 jqueryhtmldrop-down-menu
• Jquery 创建www.christmas.jackdaniels.com的原因是什么 jqueryhtmlcss
• jquery文件上载上载到服务器的图像未显示 jqueryasp.net-mvc-4file-upload
• jQuery中窗口的大小调整了多少？ jquerycssgoogle-chrome
• Jquery 转盘/滑块图像未正确调整大小 jqueryhtmlcsstwitter-bootstrap
• Jquery ajax submit中使用bootstrap进行MVC模型验证 jqueryajaxasp.net-mvctwitter-bootstrap-3
• Reme上传的文件jquery jqueryajaxfile
• Jquery 密码正则表达式验证始终出错 jqueryregex
• Jquery Moment.js：为什么要选择此转换日期->；Unix给我的是5:00:00而不是0:00:00？ jquerydate
• Jquery 读取成功时Kendo DropdownList MVC绑定JS函数 jqueryasp.net-mvckendo-ui

---

• 随机文章推荐

• Jasper reports 在iReport中使用xPath函数 jasper-reports
• Jasper reports jasper报告中以任何格式显示的空白报告 jasper-reports
• Jasper reports 有没有办法为Jasper子报表包含jrxml源代码？ jasper-reports
• Jasper reports JasperServer-如何阻止报告中的水平线在屏幕上延伸 jasper-reports
• Jasper reports “子报告重叠”；“最后一页页脚”；乐队 jasper-reports
• Jasper reports jasper report：字符串中用于在word中创建无编号列表的标记 jasper-reports
• Jasper reports JasperReport中的动态查询 jasper-reports
• Jasper reports IReport:详细信息栏不会溢出到下一页 jasper-reports
• Jasper reports 如何在主报表中确定子报表的高度？ jasper-reports
• Jasper reports 使用JasperReports在生成的PDF中缩进 jasper-reports
• Jasper reports 在jasper中何时使用字段以及何时使用参数和变量，您能提供帮助吗？ jasper-reports
• Jasper reports 如何在jaspersoft reports customizer for jFreeChart中的单个XYDataSet上设置多个渲染器 jasper-reports
• Jasper reports 在水平报告中动态设置列计数 jasper-reports
• Jasper reports Jasper Soft Excel列问题 jasper-reports
• Jasper reports 在Jasper服务器中创建日历以选择日期（和时间） jasper-reports
• Jasper reports 为什么子报表不拆分？ jasper-reports
• Jasper reports 将评估时间从“报告”更改为“自动”后，报告中的值错误 jasper-reports
• Jasper reports JasperReports报告末尾的额外空白页 jasper-reports
• Jasper reports Jasper报告圆形矩形渲染不正确 jasper-reports
• Jasper reports JasperReport上未定义句柄划分 jasper-reports