本文介绍了这里有一些设计。数据表功能工作正常，但在重新加载表头后会收缩，但当我单击表时，它就正常了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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。
如果使用垂直滚动(滚动)而不是水平滚动 (Scroll X)，启用水平滚动选项，这样表格就有空间滚动到其中。
启用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();
});
这篇关于这里有一些设计。数据表功能工作正常，但在重新加载表头后会收缩，但当我单击表时，它就正常了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！