数据表中的样式扭曲

如何解决数据表中的样式扭曲

下面是我的脚本配置代码

bundles.Add(new ScriptBundle("~/bundles/lib").Include(
            "~/Scripts/jquery.min.js","~/Scripts/bootstrap.min.js","~/Scripts/bs-init.js","~/Scripts/chart.min.js","~/Scripts/theme.js","~/Scripts/datatables/jquery.datatables.js","~/Scripts/datatables/datatables.bootstrap.js","~/Scripts/respond.js"));

这是我的 CSS 配置代码

 bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.min.css","~/Content/fontawesome-all.min.css","~/Content/font-awesome.min.css","~/Content/fontawesome5-overrides.min.css","~/Content/Bold-BS4-Footer-Simple.css","~/Content/x-dropdown.css","~/Content/datatables/css/dataTables.bootstrap.css","~/Content/site.css"));

这就是我使用 Jquery 的方式

@section 脚本{

<script>
    $(document).ready(function () {
        $("#productTable").DataTable();
    }

        );

</script>

}

我在 ASP.NET Web 应用程序中使用带有引导程序的 DataTable 插件。但是样式扭曲并且分页按钮出现在侧面。无法弄清楚如何修复它。如果你能帮忙，我附上下面的ss

解决方法

问题出在脚本顺序上。要修复，datatables.bootstrap.js 文件必须在文件 jquery.datatables.js 之前

像这样

 bundles.Add(new ScriptBundle("~/bundles/lib").Include(
            "~/Scripts/jquery.min.js","~/Scripts/bootstrap.min.js","~/Scripts/bs-init.js","~/Scripts/chart.min.js","~/Scripts/theme.js","~/Scripts/datatables/datatables.bootstrap.js","~/Scripts/datatables/jquery.datatables.js","~/Scripts/respond.js"));