这里有一些设计。数据表功能工作正常，但在重新加载表头后会收缩，但当我单击表时，它就正常了

本文介绍了这里有一些设计。数据表功能工作正常，但在重新加载表头后会收缩，但当我单击表时，它就正常了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

推荐答案

根据对该问题的研究，出现这种情况是因为您启用了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();
    });

这篇关于这里有一些设计。数据表功能工作正常，但在重新加载表头后会收缩，但当我单击表时，它就正常了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！