有一些设计。数据表功能工作正常，但在重新加载表头后会缩小，但是当我点击表时它很好答案

【问题标题】：There is some design. Data tables functionality working fine but on after reloading table header shrink but when I click on table its fine then有一些设计。数据表功能工作正常，但在重新加载表头后会缩小，但是当我点击表时它很好
【发布时间】：2021-11-14 05:59:55
【问题描述】：

Its link for reloading page Its link for after clicking table head

这是我的 JavaScript 代码以及我的页脚引用和页眉引用。问题是我的设计首先显示错误设计，但是当我单击标题时，它显示正确的设计。

<link rel="stylesheet" href="~/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
<!--fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css" rel="stylesheet" />

<link rel="stylesheet" href="~/font/font/flaticon.css">
<link rel="stylesheet" href="~/css/StyleSheet.css">



$(document).ready(function () {
        $('#draft-data-table').DataTable({
            processing: true, // for show progress bar  
            serverSide: false, // for process server side  
            filter: true, // this is for disable filter (search box)  
            orderMulti: false, // for disable multiple column at once  
            "pagingType": "full_numbers",
            pageLength: 5,
            lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
            deferRender: true,
            paging: true,
            scrollY: 200,
            scrollCollapse: true,
            scroller: true,
        });
    });```

```<script src="~/js/jquery-3.5.1.js"></script>
<script src="~/js/popper.min.js" ></script>
<script src="~/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>

<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/libt/signalr/dist/browser/signalr.js"></script>```

【问题讨论】：

标签： javascript c# ajax asp.net-core datatables

【解决方案1】：

根据对该问题的研究，这是因为您启用了 scrollY，但未启用 scrollX。

如果您使用的是垂直滚动 (scrollY) 而不是水平滚动 (scrollX)，启用水平滚动选项，以便表格有空间滚动。

启用scrollX 选项后，将以下内容添加到您的 CSS 样式表中：

table.dataTable tbody th,
table.dataTable tbody td {
    white-space: nowrap;
}

$(document).ready(function () {
       var table = $('#draft-data-table').DataTable({
            processing: true, // for show progress bar  
            serverSide: false, // for process server side  
            filter: true, // this is for disable filter (search box)  
            orderMulti: false, // for disable multiple column at once  
            "pagingType": "full_numbers",
            pageLength: 5,
            lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
            deferRender: true,
            paging: true,
            scrollY: 200,
            scrollX: true,
            scrollCollapse: true,
            scroller: true,
        });
    });

<head>
<!--Styles-->
<link rel="stylesheet" href="~/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
<!--fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css" rel="stylesheet" />

<link rel="stylesheet" href="~/font/font/flaticon.css">
<link rel="stylesheet" href="~/css/StyleSheet.css">
<!--Scripts-->
<script src="~/js/jquery-3.5.1.js"></script>
<script src="~/js/popper.min.js" ></script>
<script src="~/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
</head>

另一种解决方法是使用 DataTables 网站上记录的columns.adjust() 参考资料here。

这会重新计算表格的列宽。确保在表初始化后调用table.columns.adjust().draw();

$(document).ready(function () {
       var table = $('#draft-data-table').DataTable({
            processing: true, // for show progress bar  
            serverSide: false, // for process server side  
            filter: true, // this is for disable filter (search box)  
            orderMulti: false, // for disable multiple column at once  
            "pagingType": "full_numbers",
            pageLength: 5,
            lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
            deferRender: true,
            paging: true,
            scrollY: 200,
            scrollX: true,
            scrollCollapse: true,
            scroller: true,
        });

table.columns.adjust().draw();
    });

【讨论】：

如果这个答案有帮助请点赞:)