有一些设计。数据 table 的功能工作正常，但在重新加载后 table header 收缩，但是当我单击 table 时它很好

Question

[![在此处输入图片描述][1]][1]

这是我的 JavaScript 代码和我的页脚参考和 Header 参考。问题是我的设计首先显示错误设计，但是当我单击 header 时它显示正确的设计。

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


  [1]: https://i.stack.imgur.com/9hcOx.png

Answer 1

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

If you are using vertical scrolling (scrollY) and not horizontal scrolling (scrollX), enable the horizontal scrolling option so the table has space to scroll into.

启用 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 网站上记录 here 的 columns.adjust() 参考。

什么这个重新计算了table的列宽。确保在 table 初始化后调用 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();
    });

有一些设计。数据 table 的功能工作正常，但在重新加载后 table header 收缩，但是当我单击 table 时它很好

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

javascript

c#

ajax

datatables

asp.net-core